Gränsradie - CSS-tricks | CSS Almanack 2025

Du kan ge alla element "rundade hörn" genom att använda en border-radiusgenom CSS. Du märker bara om det är en färgförändring inblandad. Till exempel om elementet har en bakgrundsfärg eller kant som skiljer sig från elementet som det är över. Enkla exempel:

#example-one ( border-radius: 10px; background: #BADA55; ) #example-two ( border-radius: 10px; border: 3px solid #BADA55; )

Det är verkligen inte nödvändigt längre, men för absolut bästa möjliga webbläsarsupport kan du prefixa med -webkit-och -moz-:

.round ( /* Safari 3-4, iOS 1-3.2, Android 1.6- */ -webkit-border-radius: 12px; /* Firefox 1-3.6 */ -moz-border-radius: 12px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */ border-radius: 12px; )

Lägg märke till ordningen på dessa fastigheter: leverantörsprefixen listas först och den icke-prefixade ”spec” -versionen listas senast. Detta är rätt sätt att göra det. Gränsradie är ett särskilt bra exempel på varför vi gör det på det sättet. I lite mer komplicerad version av att använda border-radius(där du skickar två värden istället för ett) skulle det äldre -webkit-leverantörsprefixet göra något helt annat än "spec" -versionen. Så om vi blindt kopierar / klistrar in samma värden till alla tre egenskaper, kan vi se olika resultat i webbläsaren. Läs mer om detta scenario. För den mest konsekventa långsiktiga är det bäst att lista "spec" -versionen senast.

Det är ganska realistiskt idag att släppa prefix och bara använda gränsradie, som diskuteras här.

Om elementet har en bildbakgrund klipps det naturligtvis i det rundade hörnet:

#example-three ( border-radius: 20px; background: url(bglines.png.webp); /* will get clipped */ )

Ibland kan du se en background-color"läcka" utanför en gräns när den border-radiusär närvarande. (ser). För att förhindra detta använder du bakgrundsklipp:

.round ( border-radius: 10px; /* Prevent background color leak outs */ -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; )

Med bara ett värde border-radiuskommer det att vara detsamma i alla elementens fyra hörn. Men det behöver inte vara fallet. Du kan specificera varje hörn separat om du vill:

.round ( border-radius: 5px 10px 15px 20px; /* top left, top right, bottom right, bottom left */ )

Du kan också ange två eller tre värden. MDN förklarar det bra:

Om ett värde är inställt gäller denna radie för alla fyra hörnen .
Om två värden är inställda, den första gäller top-leftoch bottom-righthörnet, andra gäller top-rightoch bottom-lefthörn.
Fyra värden gäller för top-left, top-right, bottom-right, bottom-lefthörn i den ordningen.
Tre värden: Det andra värdet gäller top-rightoch även bottom-left.

#example-four ( border-radius: 5px 20px 5px; background: #BADA55; )

Du kan också ange radierna i vilka hörnet avrundas. Med andra ord behöver avrundningen inte vara helt cirkulär, den kan vara elliptisk. Detta görs med en snedstreck (“/”) mellan två värden.

#example-five ( border-radius: 10px/30px; /* horizontal radius / vertical radius */ ) #example-six ( border-radius: 30px/10px; /* horizontal radius / vertical radius */ )

Obs! Firefox stöder endast elliptiska kanter i 3.5+ och äldre WebKit-webbläsare (t.ex. Safari 4) behandlar felaktigt “40px 10px” som samma som “40px / 10px”.

Du kan ange värdet av border-radiusi procent. Detta är särskilt användbart när du vill skapa en cirkel- eller elipsform, men kan användas när du vill att kantradien ska korreleras direkt med elementets bredd.

#example-seven, #example-eight ( border-radius: 50%; ) #example-eight ( width: 200px; )

Obs! I Safari-procentvärden för gränsradie stöds endast i 5.1+. I Opera stöds endast i 11.5+.

Här är varje enskild fastighet med leverantörsprefix:

.round ( -webkit-border-top-left-radius: 1px; -webkit-border-top-right-radius: 2px; -webkit-border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-topleft: 1px; -moz-border-radius-topright: 2px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 4px; border-top-left-radius: 1px; border-top-right-radius: 2px; border-bottom-right-radius: 3px; border-bottom-left-radius: 4px; )

Obs! Var och en av dessa värden kan också ha ett mellanseparerat värde, som "5px 10px", som beter sig som ett snedavgränsat värde i stenografi (horisontell radie (mellanslag) vertikal radie).

Resurser

Snabbt verktyg för att skapa gränsradiekod
Mozilla Docs
På jakt efter den perfekta radien
Behöver vi prefixa gränsradien längre?

Här är en liten sak att spela med olika egenskaper och värden:

Se Pen All the border-radius 'av Chris Coyier (@chriscoyier) på CodePen.

Webbläsarstöd

Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.