Arrotondamento CSS

Arrotondamento CSS

attraverso CSS border-radius Le proprietà possono implementare lo stile di “arco” per qualsiasi elemento.

Proprietà border-radius CSS

CSS border-radius L'attributo definisce il raggio degli angoli dell'elemento.

Suggerimento:Puoi utilizzare questo attributo per aggiungere arrotondamenti agli elementi!

Ecco tre esempi:

1. Elementi con colore di sfondo specificato arrotondati:

Arrotondamento!

2. Elementi con bordo arrotondati:

Arrotondamento!

3. Elementi con immagine di sfondo arrotondati:

Arrotondamento!

Ecco il codice:

Esempio

#rcorners1 {
  border-radius: 25px;
  sfondo: #73AD21;
  margine: 20px; 
  larghezza: 200px;
  altezza: 150px; 
}
#rcorners2 {
  border-radius: 25px;
  bordo: 2px solid #73AD21;
  margine: 20px; 
  larghezza: 200px;
  altezza: 150px; 
}
#rcorners3 {
  border-radius: 25px;
  sfondo: url(paper.gif);
  background-position: sinistra alto;
  background-repeat: repeat;
  margine: 20px; 
  larghezza: 200px;
  altezza: 150px; 
}

Prova te stesso

Suggerimento:border-radius L'attributo è in realtà un abbreviazione degli attributi seguenti:

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius

CSS border-radius - specifica ogni angolo

border-radius L'attributo accetta da uno a quattro valori. Le regole sono le seguenti:

Quattro valori - border-radius: 15px 50px 30px 5px;(Utilizzati rispettivamente: angolo in alto a sinistra, angolo in alto a destra, angolo in basso a destra, angolo in basso a sinistra):

Tre valori - border-radius: 15px 50px 30px;(Il primo valore viene utilizzato per l'angolo in alto a sinistra, il secondo valore viene utilizzato per l'angolo in alto a destra e in basso a sinistra, il terzo per l'angolo in basso a destra):

Due valori - border-radius: 15px 50px;(Il primo valore viene utilizzato per l'angolo in alto a sinistra e in basso a destra, il secondo valore viene utilizzato per l'angolo in alto a destra e in basso a sinistra):

Un valore - border-radius: 15px;(Questo valore viene utilizzato per tutti e quattro gli angoli, gli arrotondamenti sono gli stessi):

Ecco il codice:

Esempio

#rcorners1 {
  border-radius: 15px 50px 30px 5px;
  sfondo: #73AD21;
  margine: 20px; 
  larghezza: 200px;
  altezza: 150px; 
}
#rcorners2 {
  border-radius: 15px 50px 30px;
  sfondo: #73AD21;
  margine: 20px; 
  larghezza: 200px;
  altezza: 150px; 
}
#rcorners3 {
  border-radius: 15px 50px;
  sfondo: #73AD21;
  margine: 20px; 
  larghezza: 200px;
  altezza: 150px; 
}
#rcorners4 {
  border-radius: 15px;
  sfondo: #73AD21;
  margine: 20px; 
  larghezza: 200px;
  altezza: 150px; 
}

Prova te stesso

Puoi anche creare angoli ellittici:

Esempio

#rcorners1 {
  border-radius: 50px / 15px;
  sfondo: #73AD21;
  margine: 20px; 
  larghezza: 200px;
  altezza: 150px; 
}
#rcorners2 {
  border-radius: 15px / 50px;
  sfondo: #73AD21;
  margine: 20px; 
  larghezza: 200px;
  altezza: 150px; 
}
#rcorners3 {
  border-radius: 50%;
  sfondo: #73AD21;
  margine: 20px; 
  larghezza: 200px;
  altezza: 150px;
}

Prova te stesso

Proprietà arrotondamento angoli CSS

Attributo Descrizione
border-radius Proprietà abbreviata per impostare tutti i quattro attributi border-*-*-radius.
border-top-left-radius Definire la forma del bordo dell'angolo in alto a sinistra.
border-top-right-radius Definire la forma del bordo dell'angolo in alto a destra.
border-bottom-right-radius Definire la forma del bordo dell'angolo in basso a destra.
border-bottom-left-radius Definire la forma del bordo dell'angolo in basso a sinistra.