CSS property - border-radius

Beschrijving

CSS3 beschikt over een eigenschap met de naam border-radius waarmee je gemakkelijk ronde hoeken kan maken. De vier hoeken hoeven niet dezelfde ronding te hebben. Je kan per hoek de ronding opgeven. Verder kan je de hoogte en de breedte van elke hoek apart instellen. Op deze manier kan je zelfs een ellips of een cirkel maken.

De naam border-radius is ongelukkig gekozen. In tegenstelling tot wat je zou kunnen denken, heb je geen border nodig op die eigenschap toe te passenn. Ook een achtergrondkleur of -afbeelding wordt afgerond. De daar gebruikte achtergrond-afbeelding is gewoon vierkant, maar de hoeken worden netjes afgerond door de border-radius er op toe te passen.

Steno-notatie

De vier waarden voor elke radii worden opgegeven in deze volgorde: linksboven, rechtsboven, rechtsonder, linksonder. Als linksonder wordt weggelaten is het hetzelfde als rechtsboven . Als rechtsonder wordt weggelaten is het gelijk linksboven. Als rechtsboven wordt weggelaten het is hetzelfde als bovenlinks.

Detail notatie

In voorbeeld 1 is

border-radius: 1em;

gelijk aan:

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

In voorbeeld 2 is

border-radius: 2em 1em;

gelijk aan:

border-top-left-radius:2em; 
border-top-right-radius:1em; 
border-bottom-right-radius:2em; 
border-bottom-left-radius:1em;

In voorbeeld 3 is

border-radius: 2em 1em 4em;

gelijk aan:

border-top-left-radius:2em; 
border-top-right-radius:1em; 
border-bottom-right-radius:4em; 
border-bottom-left-radius:1em;

Generator

Op de website van CSSmatic vind je een online generator om border-radius stijlregels automatisch te genereren.