CSS/Tutorials/Boxmodell/Rahmen
Text-Info
- 30min
- einfach
- Grundkenntnisse in
• HTML
• CSS
Grundsätzlich haben die meisten HTML-Elemente einen transparenten Hintergrund und keinen Rahmen. Mit den border-…-Eigenschaften, aber auch mit box-shadow und outline können Sie auf vielfältige Weise Rahmen definieren.
Rahmendefinitionen können dazu führen, dass die Inhalte von Elementen sehr nah an dem sie umgebenden Rahmen kleben. Zu diesem Zweck können Sie Innenabstände definieren. Dadurch schaffen Sie einen Abstand zwischen dem Rahmen und seinem Inhalt.
Für alle Elemente können folgende Eigenschaften Anwendung finden:
- border als zusammenfassende Eigenschaft von
- border-width als zusammenfassende Eigenschaft von
- border-top-width,
- border-right-width,
- border-bottom-width,
- border-left-width
- border-style als zusammenfassende Eigenschaft von
- border-top-style
- border-right-style
- border-bottom-style
- border-left-style
- border-color als zusammenfassende Eigenschaft von
- border-top-color,
- border-right-color,
- border-bottom-color,
- border-left-color
- border-width als zusammenfassende Eigenschaft von
- border-top als zusammenfassende Eigenschaft von
- border-top-width
- border-top-style
- border-top-color
- border-right als zusammenfassende Eigenschaft von
- border-right-width
- border-right-style
- border-right-color
- border-bottom als zusammenfassende Eigenschaft von
- border-bottom-width
- border-bottom-style
- border-bottom-color
- border-left als zusammenfassende Eigenschaft von
- border-left-width
- border-left-style
- border-left-color
- border-radius als zusammenfassende Eigenschaft von
- border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius
- border-image als zusammenfassende Eigenschaft von
- border-image-source
- border-image-slice
- border-image-width
- border-image-outset
- border-image-repeat
Für Rahmen von Tabellenzellen können zudem folgende Eigenschaften Verwendung finden:
Inhaltsverzeichnis
border[Bearbeiten]
Mit der border-Eigenschaft können Sie das Aussehen eines Rahmens um ein Element bestimmen. Sie ist eine Zusammenfassung der möglichen Einzelangaben zu Rahmendicke, Rahmentyp und Rahmenfarbe.
alle Seiten eines Elements[Bearbeiten]
Notieren Sie Angaben zu Linienstärke, Rahmentyp und Farbe mit Leerzeichen dazwischen:
.one {
border: medium solid red;
}
.two {
border: thick dotted red;
}
.three {
border: 1em groove red;
}
.four {
border: 1em ridge red;
}
.five {
border: 1em inset red;
}
.six {
border: 1em outset red;
}
.seven {
border-width: 1em;
border-style: solid;
border-color: red blue yellow green;
}
.eight {
border: 1em double red;
border-radius: 1em;
}
.nine {
border: 1em dashed red;
border-radius: 50%;
}
.ten {
border: .5em solid red;
outline: .5em solid blue;
box-shadow: 0 0 0 .5em yellow inset;
}
Die Reihenfolge der Angaben ist egal. Es dürfen dabei auch nur eine oder zwei Angaben gemacht werden. Bei fehlender Farbangabe ist die Voreinstellung die Textfarbe des Elements, bei fehlender Rahmenstärke ist die Voreinstellung medium.
border: width style color;.einzelne Seiten eines Elements[Bearbeiten]
Daneben können Sie zusammenhängende Angaben für Rahmendicke, Rahmenfarbe und Rahmentyp auch für einzelne Seiten des Elements machen.
-
border-topdefiniert eine zusammenhängende Angabe für oben, -
border-rightfür rechts, -
border-bottomfür unten und -
border-leftfür links.
border: 1px solid red 3px dotted green; ist nicht möglich. h2 {
border-bottom: thick double blue;
float: left;
width: 48%;
}
h2.anders {
border-bottom: medium solid blue;
float: right;
}
p {
border: 1px solid red;
width: 30em;
padding: 5px;
clear: both;
}
p.beachten {
border: none;
border-left: 5px solid #FFCCCC;
}
- Überschriften nehmen als Block-Elemente normalerweise die gesamte Fensterbreite ein. Die Angaben zu
floatbei den Überschriften stellen sicher, dass diese nur so breit sind, wie ihr Inhalt es erfordert. Näheres dazu finden Sie unter CSS/Eigenschaften/float. - Für den Absatz mit der Klasse „beachten“ gilt wie für alle Absätze zunächst einmal ein kompletter roter Rahmen. Da dieser nicht erwünscht ist, wird er mit
border: none;entfernt, bevor der linke Rahmen gesetzt wird.
border-width[Bearbeiten]
Sie können mit der Eigenschaft border-width für ein Element die Rahmendicke bestimmen. Sinnvollerweise sollten Sie diese Angabe zumindest mit einer Angabe zum Rahmentyp kombinieren, gegebenenfalls aber auch mit einer Festlegung der Rahmenfarbe.
Erlaubt ist eine numerische Angabe (mit Ausnahme von Prozentwerten) für die Rahmendicke oder einer der folgenden Werte:
-
thin= dünn. -
medium= mittelstark. -
thick= dick. -
inherit= Übernehmen der Rahmendicke vom Elternelement.
p {
width: 30em;
padding: 0 1em;
}
.links {
border-left-width: medium;
border-left-style: solid;
border-color: #fcc;
}
.linksrechts {
border-left-width: thick;
border-left-style: solid;
border-left-color: red;
border-right-width: 1.5em;
border-right-style: solid;
border-right-color: green;
}
.rundrum {
background-color: lightgray;
border-width: 6px;
border-style: solid;
border-color: gray;
border-right-color: black;
border-bottom-color: black;
}
border-color[Bearbeiten]
Sie können mit der Eigenschaft border-color für ein Element die Rahmenfarbe bestimmen. Die Angabe dazu sollten Sie mit einer Angabe zum Rahmentyp und/oder einer Angabe zur Rahmendicke kombinieren.
Folgende Angaben sind möglich:
-
currentColor: Standardwert, aktuell festgelegte Farbe -
transparent -
Farbangabe: eine, oder mehrere Farbwerte. (Wenn mehrere Werte angegeben werden, gelten Sie für oben, rechts, unten, links)
Sie können einen Rahmen auch mit einem Farbverlauf einfärben, wenn Sie die Eigenschaft border-image verwenden.
border-style[Bearbeiten]
Mit der Eigenschaft border-style können Sie verschiedene Rahmentyp definieren. Damit die Typen zur Geltung kommen, empfiehlt sich die Kombination mit Angaben zur Rahmendicke und/oder zur Rahmenfarbe.
Erlaubt ist eine der folgenden Angaben
-
none= kein Rahmen (bzw. unsichtbarer Rahmen). -
hidden= kein Rahmen (bzw. unsichtbarer Rahmen), gedacht für Tabellenzellen -
dotted= gepunktet. -
dashed= gestrichelt. -
solid= durchgezogen. -
double= doppelt durchgezogen. -
groove= 3D-Effekt. -
ridge= 3D-Effekt. -
inset= 3D-Effekt. -
outset= 3D-Effekt.
p {
border-width: 1em;
border-color: red;
}
.gepunktet {border-style: dotted;}
.gestrichelt {border-style: dashed;}
.durchgezogen {border-style: solid;}
.doppelt {border-style: double;}
.gerillt {border-style: groove;}
.kammfoermig {border-style: ridge;}
.inset {border-style: inset;}
.outset {border-style: outset;}
Um unter Verwendung der Eigenschaft border-style für einzelne Seiten des Elements einen unterschiedlichen Rahmentyp zu bestimmen, sind folgende Regeln zu beachten:
- Eine Angabe: für alle 4 Rahmen gilt derselbe Wert
- Zwei Angaben: 1. Wert für oben und unten, 2. Wert für links und rechts
- Drei Angaben: 1. Wert für oben, 2. Wert für links und rechts, 3. Wert für unten
- Vier Angaben: 1. Wert für oben, 2. Wert für rechts, 3. Wert für unten, 4. Wert für links
Außerdem können Sie entsprechende Werte für die Eigenschaften
-
border-top-style, den Rahmentyp für oben, -
border-right-style, den Rahmentyp für rechts, -
border-bottom-style, den Rahmentyp für unten und -
border-left-style, den Rahmentyp für links
setzen.
variable Länge der Strichelung[Bearbeiten]
Wie die Strichelung bei border-style: dashed ausgeführt wird entscheidet der Browser. Eine Festlegung der Strichlänge ist nicht vorgesehen. In der zukünftigen CSS Backgrounds and Borders Module Level 4 ist dafür eine border-clip-Eigenschaft geplant.
In SVG können Sie mit stroke-dasharray Länge und Rhythmus der Strichelung von Konturen frei gestalten.
Dreiecke mit CSS erzeugen[Bearbeiten]
Zur Jahrtausendwende gab es CSS-Hacks, mit denen Sie geometrische Formen nur mit CSS ohne den Einsatz externer Grafiken erzielen konnten. Diese fanden z. B. bei Weiter-Links oder Buttons Verwendung:[1]
div {
border-style: solid;
border-top-color: yellow;
border-right-color: green;
border-bottom-color: blue;
border-left-color: red;
}
#slant {
border-width: 1em;
width: 4em;
height: 4em;
animation: slant 3s infinite alternate linear;
}
@keyframes slant {
0 {
width: 4em;
height: 4em;
border-width: 1em;
}
100% {
width: 0;
height: 0;
border-width: 3em;
border-color: transparent;
border-bottom-color: blue;
}
}
#slant2 {
width: 0;
height: 0;
border-width: 3em;
animation: slant2 3s infinite alternate linear;
}
Das obere 5x5em große div hat einen 1em breiten Rand. Durch die Animation slant wird die Randstärke so weit vergrößert und die Höhe und Breite reduziert, dass schließlich nur noch der untere Rand in Form eines Dreiecks sichtbar ist.
Im unteren div wird gezeigt, wie dieses Dreieck durch unterschiedliche Werte für die einzelnen Seitenränder gestaltet werden kann.
border-radius[Bearbeiten]
Sie können für ein Element mit der Eigenschaft border-radius den Radius bestimmen, mit dem die Ecken abgerundet werden. In Verbindung mit Rahmendicke, Rahmentyp und Rahmenfarbe wird eine entsprechende abgerundete Rahmenlinie gezeichnet. Der Hintergrund des Elements wird entlang der Kurve abgeschnitten, auch wenn keine sichtbare Rahmenlinie vorhanden ist.
Mögliche Werte:
- 1-4 Längenangaben oder Prozentwerte, es sind auch Wertepaare möglich
alle Ecken eines Elements[Bearbeiten]
#rund1 {
border-radius: 1em;
}
#rund2 {
border-radius: 1em;
border: 0;
background: red;
}
#rund3 {
border-radius: 4em/1em;
}
#rund4 {
border-radius: 50%;
width: 6em;
height: 6em;
}
- Box 1 erhält einen Radius von
1em - Box 2 hat den gleichen Radius, aber durch
border: 0;keine Randlinie, dafür aber einen roten Hintergrund, der entlang des Radius abgeschnitten wird. - Box 3 erhält als Radius ein Wertepaar
border-radius: 4em/1em; - Box 4 erhält als Radius ein Wertepaar
border-radius: 10%/10%; - Box 5 erhält als Radius ein Wertepaar
border-radius: 40%/40%;
Diese abgerundeten Ecken sind nicht gleichmäßig, da die Prozentzahlen sich auf die unterscheidliche Breite und Höhe des Elements beziehen. - Box 6 ist kreisrund, da der Radius 50% der (gleichgroßen) Höhe und Breite beträgt.
Die Angabe eines Wertepaares erzeugt eine elliptische Abrundung, wobei der erste Wert für die horizontale und der zweite Wert für die vertikale Halbachse steht. Eine Prozent-Angabe für die horizontale Halbachse bezieht sich auf die halbe Breite des Elements, eine Prozent-Angabe für die vertikale Halbachse auf die halbe Höhe. Wird nur ein Wert angegeben, so entsteht eine kreisförmige Abrundung. border-radius: 1em; ist identisch zu border-radius: 1em/1em;
einzelne Ecken eines Elements[Bearbeiten]
Um für einzelne Seiten des Elements mit der Eigenschaft border-radius eine unterschiedliche Rahmendicke zu bestimmen, beachten Sie folgende Regeln:
- Eine Angabe: derselbe Wert gilt für alle vier Ecken
- Zwei Angaben: 1. Wert für
oben-linksundunten-rechts, 2. Wert füroben-rechtsundunten-links - Drei Angaben: 1. Wert für
oben-links, 2. Wert füroben-rechtsundunten-links, 3. Wert fürunten-rechts - 'Vier' Angaben: 1. Wert für oben-links, 2. Wert für oben-rechts, 3. Wert für unten-rechts, 4. Wert für unten-links
Außerdem können Sie entsprechende Werte für
-
border-top-right-radius, definiert die Abrundung für oben rechts, -
border-bottom-right-radius, die Abrundung für unten rechts, -
border-bottom-left-radius, die Abrundung für unten links und -
border-top-left-radius, die Abrundung für oben links
angeben.
#rund1 {
border-radius: 1em 3em;
}
#rund2 {
border-radius: 1em 2em 3em 4em;
}
#rund3 {
border-radius: 0 1em 2em;
}
h1 {
height:2em;
text-align: center;
background-image: linear-gradient(yellow, orange, red);
border-bottom-left-radius: 10% 50%;
border-bottom-right-radius: 10% 50%;
}
- Box 1 erhält zwei Werte:
-
1em-Radius links-oben und rechts-unten -
3em-Radius rechts-oben und gegenüber
-
- Box 2 hat 4 Werte für die Ecken im Uhrzeigersinn von links oben ausgehend
- Box 3 hat 3 Werte
- der 1. Wert entspricht links oben
- der 2. Wert rechts oben
- der 3. Wert rechts unten
- da kein 4. Wert festgelegt ist, erhält die linke, untere Ecke den 2. Wert der gegenüberliegenden Ecke zugewiesen
geometrische Formen[Bearbeiten]
Mit border-radius sind auch geometrische Formen möglich:
#rund {
border-radius: 50%;
width: 6em;
height: 6em;
}
#rund8 {
border-radius: 50%;
}
#rund9 {
border: 0;
}
#rund9::after {
content: '';
height: 0;
width: 0;
border: 5em solid transparent;
border-bottom: 5em solid red;
border-radius: 50%;
}
- Box 1 wird bei gleicher Höhe und Breite mit
border-radius: 50%;zum Kreis - Box 2 hat eine größere Breite, sodass das div-Element als Oval dargestellt wird.
- Box 3 hat ein
::after-Pseudoelement mit einer Höhe und Breite von0, das aber einen 5em breiten, transparenten Rand mit einem border-radius von 50% hat. Der untere Rand erhält nun eine rote Färbung. Da die linken und rechten Ränder transparent sind, läuft die Spitze auf das 0px große div zu.
Zur Jahrtausendwende gab es CSS-Hacks, mit denen Sie geometrische Formen nur mit CSS ohne den Einsatz externer Grafiken erzielen konnten.
Heute bietet der Einsatz von SVG bessere und einfachere Möglichkeiten.Rückblick: Runde und andere Ecken für skalierbare Boxen im Jahre 2004[Bearbeiten]
Heute ist fast schon vergessen, dass noch vor ein paar Jahren abgerundete Ecken nur unter großen Verrenkungen erreicht werden konnten:
Der Selfhtml-aktuell-Artikel Runde und andere Ecken für skalierbare Boxen von Andreas Kalt vom 05.02.2004 zeigt, wie man eine skalierbare Box mit grafischer Umrahmung mittels mehrerer divs und Hintergrundgrafiken gestalten musste, um den gleichen Effekt wie mit border-radius zu erzielen.
Erst 2011 zog mit dem IE9 auch der letzte große Browser-Hersteller nach und unterstützte die border-radius-Eigenschaft.
box-decoration-break[Bearbeiten]
Die Eigenschaft box-decoration-break legt fest, wie mit Hintergründen und Rahmen zu verfahren ist, falls die Element-Box in mehrere Fragmente geteilt werden muss. Das kann etwa geschehen, wenn ein Blockelement beim Ausdrucken auf zwei Blätter verteilt wird oder ein inline-Element mehrere Zeilen beansprucht.
- Browserunterstützung
- caniuse.com
.beispiel h3 {
display: inline;
line-height: 3;
background-image: linear-gradient(to right, #df6c20 30%, #ffede0 70%);
border: 3px solid #df6c20;
border-radius: .5em;
box-shadow: .2em .2em .5em #df6c20;
margin: 1em;
padding: .3em 1em;
box-decoration-break: slice;
}
.clone h3 {
box-decoration-break: clone;
}
Mit box-decoration-break bestimmen Sie das Verhalten unterbrochener Boxen. Folgende Angaben sind möglich:
-
clone, jeder Teilbereich bekommt seinen eigenen Hintergrund und Rahmen -
slice, es wird nur ein Hintergrund und ein Rahmen dargestellt, Voreinstellung.
Wird box-decoration-break: clone; gewählt, so wird ggf. für jede einzelne Box der Hintergrund neu ermittelt, das betrifft die Werte für
Ebenso bekommt jede Box ihre eigenen
sowie
Die Außenlinie ist hingegen nicht betroffen.
box-shadow[Bearbeiten]
Die Eigenschaft box-shadow ermöglicht die Darstellung von Schattenverläufen für Boxen.
Syntax
box-shadow: offset-x | offset-y | [blur-radius] | [spread] |[color]
-
offset-x offset-y: horizontaler und vertikaler Versatz des Schattens,
eine Längenangabe jedoch kein Prozentwert -
blur-radius: (optionaler) Weichzeicheneffekt. Der Standardwert0entspricht einer scharfen Darstellung. Je größer der Wert, umso „verwaschener“ erscheint der Schatten. -
spread: (optionales) Maß für eine zusätzliche Vergrößerung des Schattens. Der Standardwert0bedeutet hier, dass der Schatten die Abmessungen „seines“ Elementes hat. Für den Ausbreitungsradius sind auch negative Werte möglich. Prozentangaben sind nicht erlaubt. -
color: (optionale) Farbangabe,
Standardwert ist currentColor, die Schriftfarbe des Elementes -
insetgibt an, dass der Schatten ins Innere der Box geworfen wird. Dies darf nur als erste oder letzte Angabe gesetzt werden. -
none: kein Schatten (Standardwert)
div {
float: left;
width: 8em;
height: 8em;
margin: 1em;
padding: 0.5em;
background-color: beige;
}
#one {
box-shadow: 10px 10px 10px 15px grey;
}
#two {
box-shadow: 10px 0 10px grey inset;
}
#three {
box-shadow: -10px -10px 10px lightgrey inset, 10px 10px grey;
}
#three {
border: 1px solid grey;
border-radius: 5px;
box-shadow: 10px 10px 10px white inset, 10px 10px 10px grey;
}
#four {
border-radius: 1.5em;
border: 10px solid red;
box-shadow: 0 0 0 1em red inset;
padding: 1em;
}
#five {
box-shadow: 2em 0 khaki inset, -2em 0 khaki inset, 0 -5px 0 0 red inset
}
- Box 1 hat einen Versatz von je 10px, einen Blur von 10px und einen spread von 15px
- Box 2 hat durch das Schlüsselwort
inseteinen inneliegenden Schatten nur nach rechts ohne einen Versatz auf der y-Achse - Box 3 hat einen weißen Innenschatten und, durch ein Komma getrennt, einen weiteren Außenschatten nach rechts unten
- Box 4 hat einen abgeschnittenen Rahmen, was sich mit border nicht erreichen lässt. Der border-radius wirkt auf das div, dann wird ein roter Innenschatten von 1em drübergelegt.
- Box 5 hat einen roten Innenschatten, der an beiden Seiten aber durch einen khaki-farbenen Innenschatten verdeckt wird, sodass es zu einer verkürzten Unterstreichung kommt.
Mehrere Schatten werden durch Kommata getrennt, sie werden dabei in umgekehrter Reihenfolge übereinander gelegt, dass heißt der zuerst genannte Schatten liegt ganz oben.
Kennzeichnung von Links mit box-shadow[Bearbeiten]
Links erhalten bei :hover oft einen andersfarbigen Hintergrund. Dafür können sie anstelle der background-Eigenschaft auch box-shadow verwenden und mit transition einen weichen Übergang zwischen den Zuständen realisieren:
a {
color: blue;
box-shadow: inset 0 -3px 0 -1px blue;
padding: .25em 0;
text-decoration: none;
transition: all .5s;
}
a:hover,
a:focus {
box-shadow: inset 0 -30px 0 skyblue;
}
Dabei wird die Unterstreichung aber nicht mit
text-decoration:underline realisiert, sondern durch einen scharfen Innenschatten. Wenn das Link-Element den Fokus erhält, wird der Innenschatten über die gesamte Fläche vergößert und wirkt nun nicht mehr als Unterstreichung, sondern als jetzt (hellerer) Hintergrund, da auch die Farbangabe geändert wurde.Siehe auch
- text-shadow
- filter: drop-shadow()
- Grafik/Farbkonzept/Licht und Schatten
- SVG/Tutorials/Filter/Licht und Schatten
- SVG/Tutorials/Text/Füllungen und Randlinien
outline[Bearbeiten]
Der Begriff outline ist mehrdeutig.Dieser Abschnitt beschreibt die CSS-Eigenschaft
outline. Für die Struktur eines HTML-Dokuments (outline) siehe HTML/Tutorials/Seitenstrukturierung.Mit den outline-…-Eigenschaften können Sie auf vielfältige Weise für ein Element eine Außenlinie festlegen.
Für alle Elemente können folgende Eigenschaften Anwendung finden
- outline als zusammenfassende Eigenschaft von
- outline-offset
Die Eigenschaft outline orientiert sich, im Gegensatz zu den border-Eigenschaften nicht an rechteckigen Blöcken, sondern ist explizit als „Rahmen für nicht-rechteckige Bereiche“ definiert. Außerdem wird die Dicke der outline nicht zur Elementgröße hinzugerechnet, sondern als letzter Schritt „draufgemalt“, ohne Platz wegzunehmen. Im Gegensatz zu den border-Rahmen können outline-Rahmen aber nur vollständig geschlossen zugewiesen werden, es fehlt die Möglichkeit, separate Angaben für oben, unten, links oder rechts zu machen. Vergleichen Sie am besten die Beispiele zu outline und border, um den Unterschied zu verstehen.
p { width: 30em; padding: 1em; margin: 3em; background-color: lightgrey; }
.outline { outline: 1em solid green; }
.border { border: 1em solid red; border-radius: 1em; }
Mit outline können Sie das Aussehen einer Außenlinie um ein Element bestimmen. Notieren Sie Angaben zu Linienstärke, Typ und Farbe mit Leerzeichen dazwischen.
Die Reihenfolge der Angaben ist egal. Es dürfen dabei auch nur eine oder zwei Angaben gemacht werden. Bei fehlender Farbangabe ist die Voreinstellung die Textfarbe des Elements, bei fehlender Rahmenstärke ist die Voreinstellung medium.
outline: width style color;.invert nicht in dieser Kurzschreibweise zu akzeptieren. Notiert man dagegen alle Eigenschaften einzeln, interpretiert Firefox dagegen auch diesen Farbwert korrekt (vgl. Beispiel zu outline-color).Beachten Sie das unterschiedliche Verhalten des Rahmens bei Inline-Elementen, wenn der darin enthaltene Text sich auf mehrere Zeilen verteilt. outline sorgt dafür, dass jeder einzelne Textabschnitt vollständig von einem Rahmen umschlossen ist, auch wenn die einzelnen Stücke nicht zusammenhängend platziert werden können. Bei border hingegen wird eventuell eine Seite eines Teilstückes offengelassen.
p { width: 15em; line-height: 2; }
span { padding: .1em .5em; }
.border { border: 2px solid red; }
.outline { outline: 2px solid green; }
Für den Rahmen können Sie dieses Verhalten mit der Eigenschaft box-decoration-break steuern.
outline-offset[Bearbeiten]
Durch die Eigenschaft outline-offset können Sie den Abstand zwischen der Rahmenlinie (border) und der Außenlinie (outline) bestimmen. Erlaubt ist eine numerische Angabe.
p {
background-color: white;
margin: 3em;
padding: 1em;
width: 30em;
}
.outline {
outline: 1em solid green;
outline-offset: 1em;
}
.border { border: 1em solid red; }
Weblinks[Bearbeiten]
- W3C: the-border-radius
- bittersmann.de: Übersicht verschiedener Angaben für
border-radius - simurai: BonBon Sweet CSS3 Buttons Buttons mit sehr unterschiedlichen geometrischen Formen.
- W3C: Drop Shadows: the ‘box-shadow’ property
- css-tricks: Breaking down CSS Box Shadow vs. Drop Shadow von Geoff Graham (20.10.2017)
mediumbreiten festen (solid) roten Rahmen.thick), gepunkteten Rahmen (dotted).groove,ridge,insetundoutseteinen 3d-Effekt. Die Rahmenfarben werden vom Browser aus dem angegebenen Farbwert berechnet.doubleeinen doppelten Rahmen, der mit border-radius abgerundete Ecken erhält.dashed) und einen border-radius von 50%.