Eigenschap in CSS - randstijl
Voorbeeld
Stel een stijl in voor de rand:
div {border-style: dotted;}
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De border-style
eigenschap bepaalt de stijl van de vier randen van een element. Deze eigenschap kan één tot vier waarden hebben.
Voorbeelden:
- border-stijl: gestippeld effen dubbel gestreept;
- bovenrand is gestippeld
- rechterrand is solide
- onderrand is dubbel
- linkerrand is onderbroken
- border-stijl: gestippeld effen dubbel;
- bovenrand is gestippeld
- rechter- en linkerranden zijn solide
- onderrand is dubbel
- randstijl: gestippeld effen;
- boven- en onderranden zijn gestippeld
- rechter- en linkerranden zijn solide
- randstijl: gestippeld;
- alle vier de randen zijn gestippeld
Standaardwaarde: | geen |
---|---|
geërfd: | Nee |
Animeerbaar: | Nee. Lees over animeren |
Versie: | CSS1 |
JavaScript-syntaxis: | object .style.borderStyle="dubbel gestippeld" |
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die de eigenschap volledig ondersteunt.
Property | |||||
---|---|---|---|---|---|
border-style | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Opmerking: de waarde "hidden" wordt niet ondersteund in IE7 en eerder. IE8 vereist een !DOCTYPE. IE9 en later ondersteunen "verborgen".
CSS-syntaxis
border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
Eigendomswaarden
Value | Description | Play it |
---|---|---|
none | Default value. Specifies no border | |
hidden | The same as "none", except in border conflict resolution for table elements | |
dotted | Specifies a dotted border | |
dashed | Specifies a dashed border | |
solid | Specifies a solid border | |
double | Specifies a double border | |
groove | Specifies a 3D grooved border. The effect depends on the border-color value | |
ridge | Specifies a 3D ridged border. The effect depends on the border-color value | |
inset | Specifies a 3D inset border. The effect depends on the border-color value | |
outset | Specifies a 3D outset border. The effect depends on the border-color value | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Meer voorbeelden
Voorbeeld
Een onderbroken rand:
div {border-style: dashed;}
Voorbeeld
Een stevige grens:
div {border-style: solid;}
Voorbeeld
Een dubbele rand:
div {border-style: double;}
Voorbeeld
Een groefrand:
div {
border-style: groove;
border-color: coral;
border-width: 7px;
}
Voorbeeld
Een nokrand:
div {
border-style: ridge;
border-color: coral;
border-width: 7px;
}
Voorbeeld
Een inzetrand:
div {
border-style: inset;
border-color: coral;
border-width: 7px;
}
Voorbeeld
Een begingrens:
div {
border-style: outset;
border-color: coral;
border-width: 7px;
}
Voorbeeld
Stel verschillende randen in aan elke kant van een element:
p.one {border-style: dotted solid dashed double;}
p.two {border-style: dotted solid dashed;}
p.three {border-style: dotted solid;}
p.four {border-style: dotted;}
Gerelateerde pagina's
CSS-zelfstudie: CSS-rand
HTML DOM-referentie: eigenschap borderStyle