CSS border-block-start-stijl eigenschap

Definitie en gebruik

border-block-start-style De eigenschap wordt gebruikt om de border-style van het element aan de start van de blokgrootte in te stellen.

CSS border-block-start-style Eigenschappen en CSS-eigenschappen border-bottom-styleborder-left-styleborder-right-style en border-top-style Zeer vergelijkbaar, maar border-block-start-style De eigenschap is afhankelijk van de blokkenrichting.

Opmerking:gerelateerde CSS eigenschappen writing-mode Definieert de blokkenrichting. Dit beïnvloedt de start- en eindpositie van de blokken en border-block-start-style Het resultaat van de eigenschap. Voor Engelse pagina's, de inline-richting is van links naar rechts, de blokkenrichting is naar beneden.

Voorbeeld

Voorbeeld 1

Stel de stijl in voor de rand aan de start van de blokkenrichting:

div {
  border-block-start-style: dotted;
}

Probeer het zelf uit

Voorbeeld 2: Combinatie van writing-mode eigenschap

De positie van de stijl van de rand aan de start van de blokkenrichting wordt beïnvloed door writing-mode Eigenschapsinvloed:

div {
  writing-mode: vertical-rl;
  border-block-start-style: dotted;
}

Probeer het zelf uit

CSS syntaxis

border-block-start-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Eigenschapswaarde

Waarde Beschrijving
none Standaardwaarde. Specificeer geen rand.
hidden Gelijk aan "none", maar verschilt in de oplossing van conflict op de rand van tabel-elementen.
dotted Specificeer een stiprand.
dashed Specificeer een gebroken rand.
solid Specificeer een rechte rand.
double Specificeer een dubbele rand.
groove

Specificeer een 3D insnoerende rand.

Het effect hangt af van de waarde van border-color.

ridge

Specificeer een 3D getande rand.

Het effect hangt af van de waarde van border-color.

inset

Specificeer een 3D ingesloten rand.

Het effect hangt af van de waarde van border-color.

outset

Specificeer een 3D uitstekende rand.

Het effect hangt af van de waarde van border-color.

initial Stel deze eigenschap in op de standaardwaarde. Raadpleeg initial.
inherit Deze eigenschap erft van de ouderlijke element. Raadpleeg inherit.

Technische details

Standaardwaarde: none
Inheritantie: Nee
Animatie maken: Niet ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie: CSS3
JavaScript syntaxis: object.style.borderBlockStartStyle="dotted"

Browserondersteuning

De cijfers in de tabel geven de browserversie aan die de eigenschap volledig ondersteunt.

Chrome Edge Firefox Safari Opera
69.0 79.0 41.0 12.1 56.0

Gerelateerde pagina's

Handleiding:CSS rand

Referentie:CSS border eigenschap

Referentie:CSS border-block eigenschap

Referentie:CSS border-block-stijl eigenschap

Referentie:CSS border-block-eind-stijl eigenschap

Referentie:CSS border-beneden-stijl eigenschap

Referentie:CSS border-links-stijl eigenschap

Referentie:CSS border-rechts-stijl eigenschap

Referentie:CSS border-boven-stijl eigenschap

Referentie:CSS writing-mode eigenschap