Beispiel:CSS border-image-3.html
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>border-image mit Gradients</title> <style> .linear1 {
border-style: solid; border-width: 1em; border-image: linear-gradient(to top right, transparent, steelBlue ) 1;
} .linear2 { border: 0;
border-block-start: 1em solid; padding-block-start: 1em; border-image: linear-gradient(90deg, steelBlue, gold) 1;
} .conic1 {
border-style: solid; border-width: 1em; border-image: conic-gradient(gold 45deg, steelBlue 135deg, #c82f04 225deg, #559000 315deg, gold 360deg) 1;
} .conic2 {
border-style: solid; border-width: 1em; border-image: repeating-conic-gradient( from 45deg at 20% 20%,
steelBlue 0 10deg, #c82f04 10deg 25deg, gold 20deg 30deg, orange 30deg 40deg, #c82f04 40deg 50deg) 20; } .radial { border: 0;
border-block-start: 1em solid; border-inline-start: 1em solid; padding: 1em; border-image: radial-gradient(circle at top left, steelBlue, transparent 50%) 1;
} .innerline {
border-style: solid;
border-width: 2em; outline: 0.2em solid white; outline-offset: -1.6em; border-image: repeating-linear-gradient(45deg, gold, gold 10px, steelBlue 10px, steelblue 30px) 40; }
body { display: grid; grid-template-columns: repeat(auto-fill, minmax(12em, 1fr)); gap: 3em; }
h1, h2 { grid-column: 1/-1; }
div { width: 100%; aspect-ratio: 3 / 2; border: thin solid; }
figure { margin: 0; } </style> </head>
<body>border-image mit Gradients
lineare und radiale Verläufe
<figure>
<figcaption>linearer Verlauf
von links unten nach rechts oben</figcaption>
</figure>
<figure>
<figcaption>linearer Verlauf
nur border-block-start</figcaption>
</figure>
<figure>
<figcaption>radialer Verlauf
links oben zentriert</figcaption>
</figure>
konische Verläufe
<figure>
<figcaption>konischer Verlauf
jede Ecke in einer anderen Farbe</figcaption>
</figure>
<figure >
<figcaption>repeating-conic-gradient()
mit scharfen Kanten</figcaption>
</figure>
<figure>
<figcaption>repeating-linear-gradient
outline und outline-offset</figcaption>
</figure>
</body>
</html>
