Mit den CSS-Rahmeneigenschaften können Sie den Stil festlegen, Breite und Farbe des Randes eines Elements.
Ich habe auf allen Seiten Grenzen.
Ich habe einen roten unteren Rand.
Ich habe abgerundete Ränder.
Die Eigenschaft border-style gibt an, welche Art von Rahmen angezeigt werden soll.
Folgende Werte sind zulässig:
dotted- Definiert einen gestrichelten Rand
solid- Definiert einen festen Rahmen
double- Definiert einen doppelten Rahmen
groove- Definiert einen 3D-Rillenrand. Der Effekt hängt vom Wert der Rahmenfarbe ab
ridge- Definiert einen geriffelten 3D-Rand. Der Effekt hängt vom Wert der Rahmenfarbe ab
inset- Definiert einen 3D-Einsatzrahmen. Der Effekt hängt vom Wert der Rahmenfarbe ab
outset- Definiert einen 3D-Ausgangsrahmen. Der Effekt hängt vom Wert der Rahmenfarbe ab
none- Definiert keinen Rand
hidden- Definiert einen versteckten Rand
Die Eigenschaft border-style kann einen bis vier Werte haben (z der obere Rand, der rechte Rand, der untere Rand und der linke Rand).
Demonstration der verschiedenen Bordürenstile:
p.dotted {border-style: dotted;}
p.dashed
{border-style: dashed;}
p.solid {border-style: solid;}
p.double
{border-style: double;}
p.groove {border-style: groove;}
p.ridge
{border-style: ridge;}
p.inset {border-style: inset;}
p.outset
{border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}Ergebnis :
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border. The effect depends on the border-color value.
A ridge border. The effect depends on the border-color value.
An inset border. The effect depends on the border-color value.
An outset border. The effect depends on the border-color value.
No border.
A mixed border.
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>
<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>
</body>
</html>
Hinweis: Keine der ANDEREN CSS-Rahmeneigenschaften (über die Sie in den nächsten Kapiteln mehr erfahren werden) hat IRGENDEINE Auswirkung, es sei denn, die Die Eigenschaft border-style ist festgelegt!