Border-radius - CSS-Tricks | Almanah CSS 2025

Puteți da oricărui element „colțuri rotunjite” prin aplicarea unui border-radiusprin CSS. Veți observa doar dacă există o schimbare de culoare implicată. De exemplu, dacă elementul are o culoare de fundal sau o margine care este diferită de elementul acesta sa încheiat. Exemple simple:

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

Într-adevăr nu mai este necesar, dar pentru cel mai bun suport posibil pentru browser, puteți prefixa cu -webkit-și -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; )

Observați ordinea acestor proprietăți: prefixele furnizorului sunt listate mai întâi, iar versiunea „spec” fără prefix este listată ultima. Acesta este modul corect de a face acest lucru. Raza de frontieră este un exemplu deosebit de bun de ce o facem așa. În versiunea ușor mai complicată a utilizării border-radius(unde treceți două valori în loc de una), -webkit-prefixul mai vechi al furnizorului ar face ceva complet diferit decât versiunea „spec”. Deci, dacă copiem / lipim orbește aceleași valori pentru toate cele trei proprietăți, am putea vedea rezultate diferite în browser. Aflați mai multe despre acest scenariu. Pentru cea mai mare consecvență pe termen lung, este mai bine să enumerați ultima versiune „spec”.

În zilele noastre este destul de realist să renunțați la prefixe și să utilizați doar raza de margine, așa cum sa discutat aici.

Dacă elementul are un fundal de imagine, acesta va fi decupat în colțul rotunjit în mod natural:

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

Uneori puteți vedea o background-color„scurgere” în afara unei granițe atunci când border-radiuseste prezentă. (vedea). Pentru a preveni acest lucru, utilizați background-clip:

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

Cu o singură valoare, border-radiusva fi la fel în toate cele patru colțuri ale unui element. Dar nu trebuie să fie cazul. Puteți specifica fiecare colț separat dacă doriți:

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

De asemenea, puteți specifica două sau trei valori. MDN o explică bine:

Dacă este setată o valoare, această rază se aplică tuturor celor 4 colțuri .
Dacă sunt setate două valori, prima se aplică la top-leftși bottom-rightcolț, a doua se aplică la top-rightși bottom-leftcolț.
Patru valori se aplică top-left, top-right, bottom-right, bottom-leftcolț în această ordine.
Trei valori: A doua valoare se aplică top-rightși, de asemenea bottom-left.

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

De asemenea, puteți specifica razele în care colțul este rotunjit. Cu alte cuvinte, rotunjirea nu trebuie să fie perfect circulară, poate fi eliptică. Acest lucru se face folosind o bară („/”) între două valori.

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

Notă: Firefox a acceptat doar margini eliptice în browserele WebKit 3.5+ și mai vechi (de exemplu Safari 4) tratează incorect „40px 10px” ca și „40px / 10px”.

Puteți specifica valoarea border-radiusîn procente. Acest lucru este deosebit de util atunci când doriți să creați un cerc sau o formă de elipse, dar poate fi utilizat oricând doriți ca raza chenarului să fie direct corelată cu lățimea elementelor.

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

Notă: în Safari, valorile procentuale pentru raza chenarului sunt acceptate numai în versiunile 5.1+. În Opera, acceptat doar în versiunile 11.5+.

Iată fiecare proprietate individuală, cu prefixe pentru furnizor:

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

Notă: Fiecare dintre aceste valori poate avea, de asemenea, o valoare separată de spațiu, cum ar fi „5px 10px”, care se comportă ca o valoare separată în linii scurte (rază orizontală (spațiu) rază verticală).

Resurse

Instrument rapid pentru generarea codului de rază a chenarului
Documente Mozilla
În căutarea razei perfecte
Mai trebuie să prefixăm raza frontierei?

Iată un mic lucru de jucat cu diferitele proprietăți și valori:

Vedeți stiloul Toată frontiera-rază de Chris Coyier (@chriscoyier) pe CodePen.

Suport pentru browser

Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.