CSS border-radius eigenschap

Definitie en gebruik

De border-radius-eigenschap is een verkorte eigenschap die wordt gebruikt om de vier border-*-radius-eigenschappen in te stellen.

Tip:Deze eigenschap stelt u in staat om elementen een ronde hoekrand toe te voegen!

Zie ook:

CSS3 Tutorial:CSS3 rand

Voorbeeld

Voeg een ronde hoekrand toe aan het div-element:

div
{
border:2px solid;
border-radius:25px;
}

Probeer het zelf

Er zijn meer voorbeelden aan de onderkant van de pagina.

CSS syntax

border-radius: 1-4 length|% / 1-4 length|%;

Opmerking:Stel de vier waarden van elke radii in deze volgorde in. Als bottom-left wordt weggelaten, is het gelijk aan top-right. Als bottom-right wordt weggelaten, is het gelijk aan top-left. Als top-right wordt weggelaten, is het gelijk aan top-left.

Eigenschapswaarde

Waarde Beschrijving Test
length Definieer de vorm van de hoek. Test
% Definieer de vorm van de hoek in percentages. Test

Voorbeeld 1

border-radius:2em;

Gelijkwaardig aan:

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

Voorbeeld 2

border-radius: 2em 1em 4em / 0.5em 3em;

Gelijkwaardig aan:

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

Technische details

Standaardwaarde: 0
Inheritantie: nee
Versie: CSS3
JavaScript syntax: object.style.borderRadius="5px"

Browserondersteuning

Tabelnummers vermelden de eerste browserversie die de eigenschap volledig ondersteunt.

Chrome IE / Edge Firefox Safari Opera
5.0
4.0 -webkit-		 9.0 4.0
3.0 -moz-		 5.0
3.1 -webkit-		 10.5