CSS property - border

Met de border eigenschap kan je vastleggen op welke manier de rand om een element moet worden weergegeven.

Overzicht

Eigenschap	Beschrijving	Toepassing
border	stenonotatie voor de breedte, stijl en kleur van alle randen van een element.
border-bottom	stenonotatie voor de breedte, stijl en kleur van de onderrand van een element.
border-left	stenonotatie voor de breedte, stijl en kleur van de linkerrand van een element.
border-right	stenonotatie voor de breedte, stijl en kleur van de rechterrand van een element.
border-top	stenonotatie voor de breedte, stijl en kleur van de bovenrand van een element.
border-color	stenonotatie voor de kleur van alle randen van een element.	CSS property - border-color
border-bottom-color	bepaalt de kleur van de onderrand van een element.
border-left-color	bepaalt de kleur van de linkerrand van een element.
border-right-color	bepaalt de kleur van de rechterrand van een element.
border-top-color	bepaalt de kleur van de bovenrand van een element.
border-style	stenonotatie voor de stijl van alle randen van een element.	CSS property - border-style
border-bottom-style	bepaalt de stijl van de onderrand van een element.
border-left-style	bepaalt de stijl van de linkerrand van een element.
border-right-style	bepaalt de stijl van de rechterrand van een element.
border-top-style	bepaalt de stijl van de bovenrand van een element.
border-width	stenonotatie voor de breedte van alle randen van een element.	CSS property - border-width
border-bottom-width	bepaalt de breedte van de onderrand van een element.
border-left-width	bepaalt de breedte van de linkerrand van een element.
border-right-width	bepaalt de breedte van de rechterrand van een element.
border-top-width	bepaalt de breedte van de bovenrand van een element.

Voorbeelden

De border eigenschap is een steno-weergave van de eigenschappen border-width, border-style en border-color.

Enkele voorbeelden:

<div style="border: thin dotted yellow ">...</div>

De border-width is thick, de border-style is dashed en de kleur is groen.

<div style="border:thick dashed green">...</div>

De border-width is medium, de border-style is solid en de kleur is rood.

<div style="border:medium solid red">...</div>

De border-width is 10 pt, de border-style is double en de kleur is blauw.

<div style="border:10pt double #3300CC">...</div>

De border-width is 5 pt, de border-style is inset, de kleur is lichtblauw, de achtergrondkleur blauw.

<div style="border:5pt inset #66CCFF; background-color: #0099FF">...</div>

De border-width is 5 pt, de border-style is outset, de kleur is lichtblauw, de achtergrondkleur blauw.

<div style="border:5pt outset #66CCFF; background-color: #0099FF">...</div>

Toepassen

We plaatsen een fijne dotted rand rond elke paragraaf. We zorgen ervoor dat de rand niet tegen de tekst plakt door een padding rond om rond toe te voegen. En tussen de paragrafen plaatsen we witruimte door de margin-top in te stellen. De strofen springen in met behulp van margin-left. De width stellen we in op 20em:

p {
  margin-top: 1em;
  margin-left: 3em;
  border: 0.1em dotted #000000;
  padding: 0.5em;
  width: 20em;
}

Door alleen de p als selector te gebruiken wordt ook de p in het footer element geselecteerd en wordt er dus een stippellijn rondom de footer getekend. Als je dit niet wilt en alleen een stippellijn rondom een strofe wilt tekenen moet je specificeren welke p een rand moet krijgen. Dat kan je door de directe afstammeling p in section te selecteren.

section > p {
  margin-top: 1em;
  margin-left: 3em;
  border: 0.1em dotted #000000;
  padding: 0.5em;
  width: 20em;
}

2016-12-07 12:52:16