HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Esercitazione CSS

CSS CASA Introduzione CSS Sintassi CSS Selettori CSS CSS Come fare per Commenti CSS Colori CSS
Colors RGB HEX HSL
Sfondi CSS
Background Color Background Image Background Repeat Background Attachment Background Shorthand
Confini CSS
frontiere Larghezza del bordo Colore del bordo Lati di confine Stenografia di confine Bordi arrotondati
Margini CSS
Margins Margin Collapse
Imbottitura CSS Altezza/larghezza CSS Modello a scatola CSS Schema CSS
Outline Outline Width Outline Color Outline Shorthand Outline Offset
Testo CSS
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
Font CSS
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
Icone CSS Collegamenti CSS Elenchi CSS Tabelle CSS
Table Borders Table Size Table Alignment Table Style Table Responsive
Display CSS Larghezza massima CSS Posizione CSS Indice Z CSS Overflow CSS CSS galleggiante
Float Clear Float Examples
CSS Inline-block Allineamento CSS Combinatori CSS Pseudo-classe CSS Pseudoelemento CSS Opacità CSS Barra di navigazione CSS
Navbar Vertical Navbar Horizontal Navbar
Menu a discesa CSS Galleria di immagini CSS Sprite di immagini CSS Selettori CSS Attr Moduli CSS Contatori CSS Layout del sito Web CSS Unità CSS Specificità CSS CSS! importante Funzioni matematiche CSS

CSS avanzato

Angoli arrotondati CSS Immagini del bordo CSS Sfondi CSS Colori CSS Parole chiave a colori CSS Gradienti CSS
Linear Gradients Radial Gradients Conic Gradients
Ombre CSS
Shadow Effects Box Shadow
Effetti di testo CSS Font Web CSS Trasformazioni 2D CSS Trasformazioni CSS 3D Transizioni CSS Animazioni CSS Suggerimenti CSS Immagini in stile CSS Riflessione dell'immagine CSS Adattamento agli oggetti CSS Posizione dell'oggetto CSS Mascheratura CSS Pulsanti CSS Impaginazione CSS Colonne multiple CSS Interfaccia utente CSS Variabili CSS
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
Dimensioni della scatola CSS Query sui media CSS Esempi CSS MQ Cassetta flessibile CSS
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

CSS reattivo

Introduzione a RWD Vista posteriore Vista griglia RWD Query sui media RWD Immagini RWD Video RWD Quadri RWD Modelli RWD

Griglia CSS

Introduzione alla griglia Contenitore a griglia Elemento griglia

CSS SASS

Esercitazione SASS

Esempi CSS

Modelli CSS Esempi CSS css quiz Esercizi CSS Certificato CSS

Riferimenti CSS

Riferimento CSS Selettori CSS Funzioni CSS CSS di riferimento sonoro Font sicuri per il Web CSS CSS Animabile Unità CSS Convertitore CSS PX-EM Colori CSS Valori di colore CSS Valori predefiniti CSS Supporto del browser CSS

Bordi arrotondati CSS

❮ Precedente Prossimo ❯

Bordi arrotondati CSS

La border-radiusproprietà viene utilizzata per aggiungere bordi arrotondati a un elemento:

Bordo normale

Bordo tondo

Bordo più tondo

Bordo più tondo

Esempio

p {
  border: 2px solid red;
  border-radius: 5px;
}

Altri esempi


In questo esempio viene illustrata una proprietà abbreviata per impostare tutte le proprietà del bordo superiore in una dichiarazione.


Questo esempio mostra come impostare lo stile del bordo inferiore.


Questo esempio mostra come impostare la larghezza del bordo sinistro.


Questo esempio mostra come impostare il colore dei quattro bordi. Può avere da uno a quattro colori.


Questo esempio mostra come impostare il colore del bordo destro.

Mettiti alla prova con gli esercizi

Esercizio:

Usa la proprietà abbreviata del bordo per impostare un bordo "4px", "punteggiato", "rosso" per gli elementi <p>.

<style>
p {
  : ;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

Tutte le proprietà del bordo CSS

Property Description
border Sets all the border properties in one declaration
border-bottom Sets all the bottom border properties in one declaration
border-bottom-color Sets the color of the bottom border
border-bottom-style Sets the style of the bottom border
border-bottom-width Sets the width of the bottom border
border-color Sets the color of the four borders
border-left Sets all the left border properties in one declaration
border-left-color Sets the color of the left border
border-left-style Sets the style of the left border
border-left-width Sets the width of the left border
border-radius Sets all the four border-*-radius properties for rounded corners
border-right Sets all the right border properties in one declaration
border-right-color Sets the color of the right border
border-right-style Sets the style of the right border
border-right-width Sets the width of the right border
border-style Sets the style of the four borders
border-top Sets all the top border properties in one declaration
border-top-color Sets the color of the top border
border-top-style Sets the style of the top border
border-top-width Sets the width of the top border
border-width Sets the width of the four borders

❮ Precedente Prossimo ❯