CSS Randkanten

CSS rand - aparte rand

In het voorbeeld van het vorige hoofdstuk hebt u gezien dat u voor elke zijde een andere rand kunt specificeren.

In CSS zijn er enkele eigenschappen die gebruikt kunnen worden om elke rand (boven, rechter, onder en linker) te specificeren:

Voorbeeld

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

Resultaat:

Verschillende randstijlen

Probeer het zelf

Verschillende randstijlen

Het resultaat van het voorbeeld hierboven is hetzelfde als:

Voorbeeld

p {
  border-style: dotted solid;
}

Probeer het zelf

Het werkingssysteem ervan is als volgt:

Als border-style De eigenschappen stellen vier waarden in:

border-style: dotted solid double dashed;

  • De bovenste rand is een doorlopende lijn
  • De rechter rand is een gestrekte lijn
  • De onderste rand is dubbelstreep
  • De linker rand is een doorlopende lijn

Als border-style De eigenschappen stellen drie waarden in:

border-style: dotted solid double;

  • De bovenste rand is een doorlopende lijn
  • De rechter en linker rand zijn solide lijnen
  • De onderste rand is dubbelstreep

Als border-style Eigenschap instellen van twee waarden:

border-style: dotted solid;

  • De bovenste en onderste rand zijn gestippelde lijnen
  • De rechter en linker rand zijn solide lijnen

Als border-style Eigenschap instellen van een waarde:

border-style: dotted;

  • Alle vier kanten zijn gestippeld

Voorbeeld

/* Vier waarden */
p {
  border-style: dotted solid double dashed; 
}
/* Drie waarden */
p {
  border-style: dotted solid double; 
}
/* Twee waarden */
p {
  border-style: dotted solid; 
}
/* Een waarde */
p {
  border-style: dotted; 
}

Probeer het zelf

In het voorbeeld wordt border-style Eigenschap. Maar border-width en border-color Ook van toepassing.