CSS border-block-eind eigenschap

Vorige pagina border-block-color
Volgende pagina border-block-end-color

Aanbevolen cursus:

border-block-end Definitie en gebruik

CSS border-block-end eigenschappen zijn de afkorting van de volgende CSS eigenschappen: border-bottom,border-left,border-right en border-top De eigenschappen zijn zeer vergelijkbaar, maar border-block-end 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-end Het resultaat van de eigenschap. Voor Engelse pagina's, is de inline richting van links naar rechts, de blokkenrichting is naar beneden.

Voorbeeld

Voorbeeld 1

Stel de breedte, kleur en stijl van de rand aan het einde van de blokkenrichting in:

div {
  border-block-end: 10px solid pink;
}

Probeer het zelf uit

Voorbeeld 2: Combinatie met de writing-mode eigenschap

De positie van de rand aan het einde van de blokkenrichting wordt beïnvloed door writing-mode Het effect van de eigenschap:

div {
  writing-mode: vertical-rl;
  border-block-end: dotted blue;
}

Probeer het zelf uit

CSS syntaxis

border-block-end: border-block-end-width border-block-end-style border-block-end-color|initial|inherit;

Eigenschapswaarde

Waarde	Beschrijving
border-block-end-width	Specificeer de breedte van de rand aan het einde van de blokkenrichting. De standaardwaarde is "medium".
border-block-end-style	Specificeer het stijltype van de rand aan het einde van de blokkenrichting. De standaardwaarde is "none".
border-block-end-color	Specificeer de kleur van de rand aan het einde van de blokkenrichting. De standaardwaarde is de huidige kleur van de rand.
initial	Deze eigenschap instellen op de standaardwaarde. Raadpleeg initial.
inherit	Deze eigenschap wordt van de ouder element overgenomen. Raadpleeg inherit.

Technische details

Standaardwaarde:	medium none currentcolor
Inheritantie:	Nee
Animatie maken:	Ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie:	CSS3
JavaScript syntaxis:	object.style.borderBlockEnd="pink dotted 5px"