Puoi dare a qualsiasi elemento "angoli arrotondati" applicando un border-radiusCSS. Noterai solo se è coinvolto un cambiamento di colore. Ad esempio, se l'elemento ha un colore di sfondo o un bordo diverso dall'elemento su cui è finito. Esempi semplici:
#example-one ( border-radius: 10px; background: #BADA55; ) #example-two ( border-radius: 10px; border: 3px solid #BADA55; )In realtà non è più necessario, ma per il miglior supporto possibile per il browser, potresti aggiungere il prefisso -webkit-e -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; )Notare l'ordine di queste proprietà: i prefissi del fornitore sono elencati per primi e la versione "spec" senza prefisso è elencata per ultima. Questo è il modo corretto per farlo. Il raggio del bordo è un ottimo esempio del perché lo facciamo in questo modo. In una versione leggermente più complicata dell'uso border-radius(in cui si passano due valori invece di uno) il -webkit-prefisso del vecchio fornitore farebbe qualcosa di completamente diverso dalla versione "spec". Quindi, se copiamo / incolliamo ciecamente gli stessi valori in tutte e tre le proprietà, potremmo vedere risultati diversi in tutti i browser. Ulteriori informazioni su questo scenario. Per la massima coerenza a lungo termine, è meglio elencare la versione "specifica" per ultima.
Al giorno d'oggi è abbastanza realistico eliminare i prefissi e usare solo border-radius, come discusso qui.
Se l'elemento ha uno sfondo di immagine, verrà ritagliato naturalmente all'angolo arrotondato:
#example-three ( border-radius: 20px; background: url(bglines.png.webp); /* will get clipped */ )A volte puoi vedere una background-color"perdita" al di fuori di un confine quando border-radiusè presente. (vedere). Per evitare ciò si utilizza la clip di sfondo:
.round ( border-radius: 10px; /* Prevent background color leak outs */ -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; )Con un solo valore, border-radiussarà lo stesso su tutti e quattro gli angoli di un elemento. Ma non è necessario che sia così. Puoi specificare ogni angolo separatamente se lo desideri:
.round ( border-radius: 5px 10px 15px 20px; /* top left, top right, bottom right, bottom left */ )È inoltre possibile specificare due o tre valori. MDN lo spiega bene:
Se è impostato un valore, questo raggio si applica a tutti e 4 gli angoli .
Se sono impostati due valori, il primo si applica a top-lefte bottom-rightcorner, il secondo a top-righte bottom-leftcorner.
Quattro valori si applicano alla top-left, top-right, bottom-right, bottom-leftangolo in questo ordine.
Tre valori: il secondo valore si applica anche a top-righte bottom-left.
#example-four ( border-radius: 5px 20px 5px; background: #BADA55; )È inoltre possibile specificare i raggi di cui arrotondare l'angolo. In altre parole, l'arrotondamento non deve essere perfettamente circolare, può essere ellittico. Questo viene fatto usando una barra ("/") tra due valori.
#example-five ( border-radius: 10px/30px; /* horizontal radius / vertical radius */ ) #example-six ( border-radius: 30px/10px; /* horizontal radius / vertical radius */ )Nota: Firefox supporta solo i bordi ellittici nei browser WebKit 3.5+ e precedenti (ad es. Safari 4) erroneamente considera "40px 10px" come "40px / 10px".
È possibile specificare il valore di border-radiusin percentuali. Ciò è particolarmente utile quando si desidera creare un cerchio o una forma ellittica, ma può essere utilizzato ogni volta che si desidera che il raggio del bordo sia direttamente correlato alla larghezza degli elementi.
#example-seven, #example-eight ( border-radius: 50%; ) #example-eight ( width: 200px; )Nota: in Safari i valori percentuali per border-radius sono supportati solo in 5.1+. In Opera, supportato solo in 11.5+.
Ecco ogni singola proprietà, con i prefissi del fornitore:
.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; )Nota: ciascuno di questi valori può avere anche un valore separato da spazi, come "5px 10px", che si comporta come un valore separato da barra in forma abbreviata (raggio orizzontale (spazio) raggio verticale).
Risorse
- Strumento rapido per la generazione del codice del raggio del bordo
- Mozilla Docs
- Alla ricerca del raggio perfetto
- Dobbiamo più aggiungere il prefisso border-radius?
Ecco una piccola cosa da giocare con le diverse proprietà e valori:
Guarda la penna All the border-radius 'di Chris Coyier (@chriscoyier) su CodePen.
Supporto browser
Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.
Desktop
| Cromo | Firefox | IE | Bordo | Safari |
|---|---|---|---|---|
| 4 * | 3 * | 9 | 12 | 3.1 * |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2.1 * | 3.2 * |