Border-radius

Met border-radius kan je de hoeken aanpassen van elementen (foto's, textblokken e.d.). Hieronder staan verschillende voorbeelden van wat mogelijk is met border-radius. Je kan de waardes zelf aanpassen zoals jij zelf wil.

Voorbeeld en uitleg
border-radius: 20px 20px 20px 20px;

  1. Border-top-left-radius
  2. Border-top-right-radius
  3. Border-bottom-right-radius
  4. Border-bottom-left-radius

Elke kleur staat voor het onderdeel dat je kan aanpassen. Dit kan je doen door het aantal pixels of percentage (%) aan te passen.

Let op

Voor compatibiliteit met oudere browsers moet je altijd -moz-border-radius en -webkit-border-radius toevoegen. Dit is voor (oudere) browsers zoals Mozilla FireFox, Safari en Chrome.

Box-shadow & Text-shadow

Met shadow kan je jouw element een shaduw geven (foto's, textblokken, tekst e.d.). Hieronder staan verschillende voorbeelden van wat mogelijk is met box-shadow. Je kan de waardes zelf aanpassen zoals jij zelf wil.

Voorbeeld en uitleg

box-shadow: 0 0 5px 1px #000;

  1. De horizontale waarde van de schaduw. Positief is naar rechts, negatief is naar links.
  2. De verticale waarde van de schaduw. Postief is naar beneden, negatief is naar boven.
  3. Blur radius. Bepaal hoe groot en hoe veel je schaduw is. Hoe hoger het aantal, des te lichter de schaduw.
  4. Spread distance. Waarde die aangeeft hoe groot de schaduw moet zijn.
  5. De kleur van de schaduw

Elke kleur staat voor het onderdeel dat je kan aanpassen. Dit kan je doen door het aantal pixels of percentage (%) aan te passen.

Let op

Voor compatibiliteit met oudere browsers moet je altijd -moz-border-radius en -webkit-border-radius toevoegen. Dit is voor (oudere) browsers zoals Mozilla FireFox, Safari en Chrome.