CSS -grenzen
Met de CSS-randeigenschappen kunt u de stijl, breedte en kleur van de rand van een element specificeren.
Ik heb aan alle kanten grenzen.
Ik heb een rode onderrand.
Ik heb afgeronde randen.
CSS-randstijl
De border-styleeigenschap specificeert wat voor soort rand moet worden weergegeven.
De volgende waarden zijn toegestaan:
dotted- Definieert een gestippelde randdashed- Definieert een gestippelde randsolid- Definieert een stevige randdouble- Definieert een dubbele randgroove- Definieert een 3D gegroefde rand. Het effect hangt af van de grenskleurwaarderidge- Definieert een 3D geribbelde rand. Het effect hangt af van de grenskleurwaardeinset- Definieert een 3D-inzetrand. Het effect hangt af van de grenskleurwaardeoutset- Definieert een 3D-beginrand. Het effect hangt af van de grenskleurwaardenone- Definieert geen grenshidden- Definieert een verborgen rand
De border-styleeigenschap kan één tot vier waarden hebben (voor de bovenrand, rechterrand, onderrand en linkerrand).
Voorbeeld
Demonstratie van de verschillende randstijlen:
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;}
Resultaat:
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.
Opmerking: Geen van de ANDERE CSS-randeigenschappen (waarover u meer zult leren in de volgende hoofdstukken) zal ENIG effect hebben, tenzij de
border-styleeigenschap is ingesteld!