CSS property - border
Home

CSS property - border

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;
}

JI
2016-12-07 12:52:16