Mejni polmer - CSS-triki | Almanah CSS 2025

Vsakemu elementu lahko dodelite "zaobljene vogale" z uporabo border-radiusskoznjega CSS-ja. Opazili boste le, če gre za spremembo barve. Na primer, če ima element barvo ozadja ali obrobo, ki se razlikuje od elementa, ki ga je končal. Preprosti primeri:

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

Res ni več potrebno, toda za absolutno najboljšo možno podporo brskalnika lahko dodate predpono z -webkit-in -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; )

Upoštevajte vrstni red teh lastnosti: predpone prodajalcev so naštete najprej, različica »prednastavitev« brez predpone pa zadnja. To je pravi način. Polmer meje je še posebej dober primer, zakaj to počnemo tako. V nekoliko bolj zapleteni različici uporabe border-radius(kjer prenesete dve vrednosti namesto ene) bi starejša -webkit-predpona prodajalca naredila nekaj povsem drugega kot različica "spec". Če torej slepo kopiramo / prilepimo enake vrednosti v vse tri lastnosti, lahko vidimo različne rezultate med brskalnikom. Preberite več o tem scenariju. Za dolgoročno doslednost je najbolje, da zadnjo navedemo "specifikacijsko" različico.

Danes je povsem realno, da spustite predpone in uporabite samo polmer obrobe, kot je razloženo tukaj.

Če ima element ozadje slike, bo naravno zarezan v zaobljenem kotu:

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

Včasih lahko opazite background-color"puščanje" zunaj meje, kadar border-radiusje prisoten. (glej). Da bi to preprečili, uporabite posnetek v ozadju:

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

Samo z eno vrednostjo border-radiusbo enako na vseh štirih vogalih elementa. Vendar ni nujno, da je tako. Vsak vogal lahko posebej določite, če želite:

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

Določite lahko tudi dve ali tri vrednosti. MDN to dobro pojasnjuje:

Če je nastavljena ena vrednost, ta polmer velja za vse 4 vogale .
Če sta nastavljeni dve vrednosti, prva velja za top-leftin bottom-rightvogal, druga velja za top-rightin bottom-leftvogal.
Štiri vrednosti se nanašajo na top-left, top-right, bottom-right, bottom-leftkot v tem vrstnem redu.
Tri vrednosti: Druga vrednost velja za top-rightin tudi bottom-left.

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

Določite lahko tudi polmere, v katerih se zaokroži vogal. Z drugimi besedami, zaokroževanje ni nujno popolnoma krožno, lahko je eliptično. To se naredi s poševnico (“/”) med dvema vrednostma.

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

Opomba: Firefox podpira eliptične obrobe samo v brskalnikih 3.5+ in starejših WebKit (npr. Safari 4) napačno obravnava “40px 10px” kot enako kot “40px / 10px”.

Lahko določite vrednost border-radiusv odstotkih. To je še posebej uporabno, če želite ustvariti obliko kroga ali elipse, lahko pa ga uporabite kadar koli želite, da je polmer obrobe neposredno povezan s širino elementov.

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

Opomba: V Safariju so odstotne vrednosti za polmer obrobe podprte samo v različici 5.1+. V Operi je podprto samo v različici 11.5+.

Tu je vsaka posamezna lastnost s predponami prodajalcev:

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

Opomba: Vsaka od teh vrednosti ima lahko tudi vrednost, ločeno s presledkom, na primer »5px 10px«, ki se v skrajšani obliki (vodoravni polmer (presledek) navpični polmer) obnaša kot poševnica.

Viri

Hitro orodje za ustvarjanje kode polmera obrobe
Mozilla Docs
V iskanju popolnega polmera
Ali moramo več dodati predpono border-radius?

Tu je nekaj malega, s čimer se lahko poigrate z različnimi lastnostmi in vrednostmi:

Oglejte si Pen All the border-radius 'Chrisa Coyierja (@chriscoyier) na CodePen.

Podpora za brskalnik

Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.