CSS border-bottom-stijl eigenschap
Voorbeeld
Stel een stijl in voor de onderrand:
div {border-bottom-style: dotted;}
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De border-bottom-style
eigenschap bepaalt de stijl van de onderrand van een element.
Standaardwaarde: | geen |
---|---|
geërfd: | Nee |
Animeerbaar: | Nee. Lees over animeren |
Versie: | CSS1 |
JavaScript-syntaxis: | object .style.borderBottomStyle="gestippeld" |
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die de eigenschap volledig ondersteunt.
Property | |||||
---|---|---|---|---|---|
border-bottom-style | 1.0 | 5.5 | 1.0 | 1.0 | 9.2 |
CSS-syntaxis
border-bottom-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
Eigendomswaarden
Value | Description | Play it |
---|---|---|
none | Specifies no border. This is default | |
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 gestippelde onderrand:
div {border-bottom-style: dashed;}
Voorbeeld
Een stevige onderrand:
div {border-bottom-style: solid;}
Voorbeeld
Een dubbele onderrand:
div {border-bottom-style: double;}
Voorbeeld
Verwijder de onderste rand:
div {border-bottom-style: none;}
Voorbeeld
Een groef onderrand:
div {
border-bottom-style: groove;
border-bottom-color: coral;
border-bottom-width: 7px;
}
Voorbeeld
Een nok onderrand:
div {
border-bottom-style: ridge;
border-bottom-color: coral;
border-bottom-width: 7px;
}
Voorbeeld
Een inzet onderrand:
div {
border-bottom-style: inset;
border-bottom-color: coral;
border-bottom-width: 7px;
}
Voorbeeld
Een begin onderrand:
div {
border-bottom-style: outset;
border-bottom-color: coral;
border-bottom-width: 7px;
}
Gerelateerde pagina's
CSS-zelfstudie: CSS-rand
CSS-referentie: eigenschap border-bottom
HTML DOM-referentie: eigenschap borderBottomStyle