Proprietà CSS border-radius

La proprietà border-radius viene utilizzata per creare angoli arrotondati per il bordo esterno di un elemento. Funziona indipendentemente dal fatto che l'elemento abbia o meno un bordo visibile, e ritaglia lo sfondo e il box shadow alla forma arrotondata. Questa pagina tratta la sintassi abbreviata, le regole per i valori da uno a quattro, le unità percentuali rispetto alle lunghezze, la sintassi ellittica con la barra, e i casi d'uso più comuni.

La proprietà border-radius è una delle proprietà CSS3.

Questa proprietà è una proprietà abbreviata per le proprietà border-top-left-radius, border-top-right-radius, border-bottom-right-radius e border-bottom-left-radius, usate per impostare separatamente i quattro angoli di un elemento. La proprietà border-radius consente però di definire tutti e quattro gli angoli contemporaneamente. Può accettare da uno a quattro valori.

Se vengono forniti quattro valori, si applicano rispettivamente agli angoli in alto a sinistra, in alto a destra, in basso a destra e in basso a sinistra. Se il valore in basso a sinistra è omesso, eredita il valore in alto a destra. Se il valore in basso a destra è omesso, eredita il valore in alto a sinistra. Se vengono forniti solo due valori, il primo si applica agli angoli in alto a sinistra e in basso a destra, il secondo agli angoli in alto a destra e in basso a sinistra. Se viene fornito un solo valore, si applica a tutti e quattro gli angoli.

La proprietà border-radius è specificata come:

uno, due, tre o quattro valori di lunghezza o percentuale usati per impostare un singolo raggio per gli angoli.
seguiti opzionalmente da una barra ( / ) e da uno, due, tre o quattro valori di lunghezza o percentuale. Questo serve per impostare un raggio aggiuntivo, in modo da ottenere angoli ellittici.

Il primo insieme di valori (1-4) definisce il raggio orizzontale per tutti e quattro gli angoli. Un secondo insieme opzionale di valori, preceduto da una barra, definisce i raggi verticali per tutti e quattro gli angoli. Se viene fornito un solo insieme di valori, questi verranno usati per determinare sia i raggi verticali che quelli orizzontali in modo uguale.

Quando si utilizza una percentuale, essa viene risolta in base alla dimensione dell'elemento stesso: il raggio orizzontale è una percentuale della larghezza del box e il raggio verticale è una percentuale della sua altezza. Ecco perché border-radius: 50% trasforma un quadrato in un cerchio perfetto, mentre lo stesso valore su un rettangolo produce un'ellisse.

Valore iniziale	0
Si applica a	Tutti gli elementi. Si applica anche a ::first-letter.
Ereditato	No
Animabile	Sì. Ciascuna delle proprietà dell'abbreviazione è animabile.
Versione	CSS3
Sintassi DOM	`object.style.borderRadius = "20px";` (Nota: JavaScript usa il camelCase `borderRadius`, a differenza del nome della proprietà CSS con trattino.)

Sintassi

Sintassi della proprietà CSS border-radius

border-radius: <length> | <percentage> [ / <length> | <percentage> ]? | initial | inherit;

Esempio della proprietà border-radius:

Esempio della proprietà CSS border-radius

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        height: 40px;
        width: 50%;
        background: #ccc;
        border: 4px solid #1c87c9;
        border-radius: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Border-radius example</h2>
    <div></div>
  </body>
</html>

Provalo tu stesso »

Risultato

Ecco un esempio con valori in percentuale e in pixel:

Esempio della proprietà border-radius con valori in percentuale e in pixel:

Esempio della proprietà CSS border-radius con valori in percentuale e in pixel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .radius-pixel {
        height: 40px;
        background: #ccc;
        border: 4px solid #1c87c9;
        border-radius: 12px;
      }
      .radius-percent {
        width: 120px;
        height: 120px;
        margin-top: 20px;
        background: #ccc;
        border: 4px solid #1c87c9;
        border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <h2>Border-radius example with percent and pixel values</h2>
    <div class="radius-pixel"></div>
    <div class="radius-percent"></div>
  </body>
</html>

Provalo tu stesso »

Un valore in pixel fornisce lo stesso raggio degli angoli fisso indipendentemente dal ridimensionamento dell'elemento, il che è solitamente quello che si desidera per pulsanti, card e input. Una percentuale si adatta all'elemento, quindi border-radius: 50% su un elemento quadrato produce un cerchio — un trucco comune per avatar e badge.

Puoi anche impostare il border-radius per un elemento con colore di sfondo o immagine di sfondo.

Esempio della proprietà border-radius con le proprietà background-color e background-image:

Esempio della proprietà CSS border-radius con le proprietà colore di sfondo e immagine di sfondo

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .radius-bg {
        width: 250px;
        height: 200px;
        background: #ccc;
        border: 4px solid #1c87c9;
        border-radius: 12px;
      }
      .radius-img {
        width: 250px;
        height: 200px;
        margin-top: 20px;
        background-color: lightgray;
        background: url('https://api.w3docs.com/uploads/media/default/0001/01/6ef5dc22756f45ab51d0c510ad0371191ec4ff04.jpeg');
        background-position: left top;
        background-repeat: repeat;
        border: 2px solid #1c87c9;
        border-radius: 25px;
      }
    </style>
  </head>
  <body>
    <h1> Border-radius example with background color</h1>
    <div class="radius-bg"></div>
    <h2> Border-radius example with background image</h2>
    <div class="radius-img"></div>
  </body>
</html>

Provalo tu stesso »

Nota: nei browser più vecchi, le immagini di sfondo potrebbero non essere ritagliate agli angoli arrotondati. Usa background-clip: border-box; per garantire un comportamento uniforme.

Vediamo ora un esempio ricco di box vari con diversi valori di border-radius che determinano la forma dei box.

Esempio della proprietà border-radius con valori multipli:

Esempio della proprietà CSS border-radius con valori diversi (%,px)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 250px;
        height: 150px;
        border: solid 3px #1c87c9;
        background: #1c87c9;
      }
      .radius_1 {
        border-radius: 25px;
      }
      .radius_2 {
        border-radius: 25% 10%;
      }
      .radius_3 {
        border-radius: 10% 30% 50% 70%;
      }
      .radius_4 {
        border-radius: 10% / 50%;
      }
      .radius_5 {
        border-radius: 10px 100px / 120px;
      }
      .radius_6 {
        border-radius: 25% 10%;
      }
      .radius_7 {
        border-radius: 50% 20% / 10% 40%;
      }
      .radius_8 {
        border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <h1> Border-radius examples</h1>
    <div class="radius_1"></div>
    <br />
    <div class="radius_2"></div>
    <br />
    <div class="radius_3"></div>
    <br />
    <div class="radius_4"></div>
    <br />
    <div class="radius_5"></div>
    <br />
    <div class="radius_6"></div>
    <br />
    <div class="radius_7"></div>
    <br />
    <div class="radius_8"></div>
  </body>
</html>

Provalo tu stesso »

La sintassi con la barra (ad esempio border-radius: 10px 100px / 120px) separa i raggi orizzontali da quelli verticali, ed è così che si creano angoli asimmetrici ed ellittici anziché semplici quarti di cerchio.

Casi d'uso comuni

Pulsanti e card con angoli arrotondati: un piccolo valore fisso come border-radius: 6px ammorbidisce gli angoli senza distorcere la forma.
Pulsanti a forma di pillola: un valore grande come border-radius: 9999px arrotonda completamente i lati corti in una capsula.
Cerchi e avatar: border-radius: 50% su un elemento quadrato (larghezza e altezza uguali) produce un cerchio perfetto.
Forme decorative organiche: quattro valori percentuali diversi, opzionalmente con la sintassi /, creano forme organiche simili a foglie.

Valori

Valore	Descrizione	Prova
length	Imposta la dimensione dell'arrotondamento degli angoli.	Prova »
%	Imposta la dimensione dell'arrotondamento degli angoli in percentuale.	Prova »
initial	Imposta la proprietà al suo valore predefinito.	Prova »
inherit	Eredita la proprietà dall'elemento padre.

Esercitazione

Pratica

Cosa fa la proprietà CSS 'border-radius'?

Definisce il raggio del bordo della pagina.Determina il colore di sfondo del bordo.Controlla la curvatura dei bordi di un elemento.Permette di creare angoli arrotondati su un elemento.