CSS border-radius egenskab

Definition og brug

border-radius-egenskaben er en kortfattet egenskab, der bruges til at sætte fire border-*-radius-egenskaber.

Tip:Egenskaben tillader dig at tilføje runde kantbegrænsninger til elementet!

Se også:

CSS3教程：CSS3 Kants

Eksempel

Tilføj en rund kantbegrænsning til div-elementet:

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

Prøv det selv

Der er flere eksempler nederst på siden.

CSS syntaks

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

Bemærkninger:Indstil de fire værdier for hver radii i denne rækkefølge. Hvis bottom-left udelades, er det det samme som top-right. Hvis bottom-right udelades, er det det samme som top-left. Hvis top-right udelades, er det det samme som top-left.

Egenskabsværdi

Værdi Beskrivelse Test
length Definerer formen af hjørnerne. Test
% Definerer formen af hjørnerne i procent. Test

Eksempel 1

border-radius:2em;

Ligeså:

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

Eksempel 2

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

Ligeså:

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;

Tekniske detaljer

Standardværdi: 0
Arv: nej
Version: CSS3
JavaScript syntaks: object.style.borderRadius="5px"

Browser-understøttelse

Tabelens tal angiver den første browser-version, der fuldt ud understøtter egenskaben.

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