Border-radius - CSS-trucs | CSS Almanac 2025

U kunt elk element "afgeronde hoeken" geven door een border-radiusvia CSS toe te passen. U merkt het alleen als er een kleurverandering is. Als het element bijvoorbeeld een achtergrondkleur of rand heeft die anders is dan het element, is het voorbij. Simpele voorbeelden:

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

Het is echt niet meer nodig, maar voor de absoluut best mogelijke browserondersteuning kunt u een voorvoegsel gebruiken met -webkit-en -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; )

Let op de volgorde van die eigenschappen: de leveranciersvoorvoegsels worden als eerste vermeld en de niet-voorvoegsel "spec" -versie wordt als laatste vermeld. Dit is de juiste manier om het te doen. Grensradius is een bijzonder goed voorbeeld van waarom we het op die manier doen. In een iets meer gecompliceerde versie van het gebruik border-radius(waarbij u twee waarden opgeeft in plaats van één) zou het -webkit-voorvoegsel van de oudere leverancier iets heel anders doen dan de "spec" -versie. Dus als we blindelings dezelfde waarden naar alle drie de eigenschappen kopiëren / plakken, zouden we verschillende resultaten in verschillende browsers kunnen zien. Lees meer over dit scenario. Voor de meest consistente lange termijn, is het het beste om de "spec" -versie als laatste te vermelden.

Het is tegenwoordig behoorlijk realistisch om voorvoegsels weg te laten en gewoon border-radius te gebruiken, zoals hier besproken.

Als het element een afbeeldingsachtergrond heeft, wordt het natuurlijk in de afgeronde hoek afgekapt:

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

Soms zie je een background-color"lek" buiten een grens wanneer border-radiusdeze aanwezig is. (zien). Om dit te voorkomen gebruik je background-clip:

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

Met slechts één waarde border-radiuszal hetzelfde zijn op alle vier de hoeken van een element. Maar dat hoeft niet zo te zijn. U kunt elke hoek afzonderlijk specificeren als u dat wilt:

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

U kunt ook twee of drie waarden opgeven. MDN legt het goed uit:

Als er één waarde is ingesteld, is deze straal van toepassing op alle 4 de hoeken .
Als er twee waarden zijn ingesteld, is de eerste van toepassing op top-leften bottom-righthoek, de tweede op top-righten bottom-lefthoek.
Vier waarden gelden voor de top-left, top-right, bottom-right, bottom-lefthoek in die volgorde.
Drie waarden: de tweede waarde is van toepassing op top-righten ook bottom-left.

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

U kunt ook de radius opgeven waarmee de hoek wordt afgerond. Met andere woorden, de afronding hoeft niet perfect cirkelvormig te zijn, maar kan elliptisch zijn. Dit wordt gedaan met een schuine streep ("/") tussen twee waarden.

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

Opmerking: Firefox ondersteunde alleen elliptische randen in 3.5+ en oudere WebKit-browsers (bijv. Safari 4) behandelen "40px 10px" ten onrechte als hetzelfde als "40px / 10px".

U kunt de waarde van border-radiusin procenten specificeren . Dit is met name handig wanneer u een cirkel- of elipsvorm wilt maken, maar kan op elk moment worden gebruikt dat u wilt dat de straal van de rand direct wordt gecorreleerd met de breedte van de elementen.

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

Opmerking: in Safari worden percentagewaarden voor border-radius alleen ondersteund in 5.1+. In Opera, alleen ondersteund in 11.5+.

Hier is elke individuele eigenschap, met leveranciersvoorvoegsels:

.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; )

Opmerking: elk van deze waarden kan ook een door spaties gescheiden waarde hebben, zoals "5px 10px", die zich gedraagt als een door schuine streep gescheiden waarde in steno (horizontale straal (spatie) verticale straal).

Middelen

Snelle tool voor het genereren van grensradiuscode
Mozilla Docs
Op zoek naar de perfecte straal
Moeten we grens-straal meer voorvoegsel?

Hier is een kleinigheid om met de verschillende eigenschappen en waarden te spelen:

Zie de Pen All the border-radius 'door Chris Coyier (@chriscoyier) op CodePen.

Browser-ondersteuning

Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.