CSS border-radius egenskap

Definition och anvndning

border-radius-egenskapen r en forkortningsegenskap som br fr att stta fyra border-*-radius-egenskaper.

Tips:Egenskapen tillter dig att lgg till rundhjuliga kanter till elementet!

Se ven:

CSS3 lra dig:CSS3 border

Exempel

Lgg till rundhjuliga kanter till div-elementet:

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

Prova det själv

Det finns fler exempel nedan p sidan.

CSS syntax

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

Kommentar:Stt in varje radii:s fyra vrden i denna ordning. Om bottom-left utskrivs, r det samma som top-right. Om bottom-right utskrivs, r det samma som top-left. Om top-right utskrivs, r det samma som top-left.

Egenskapsvrde

Vrde Beskrivning Test
length Definiera formen av rundhjul. Test
% Definiera formen av rundhjul med procentsats. Test

Exempel 1

border-radius:2em;

Ekvivalent till:

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

Exempel 2

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

Ekvivalent till:

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;

Technical details

Default value: 0
Inheritance: no
Version: CSS3
JavaScript syntax: object.style.borderRadius="5px"

Webblsare sttning

Tabellen numrer anger den frsta webblsareversjonen som fullstndigt stder egenskapen.

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