Bordo e raggio

Lezione 5 di 8 del corso Progetto CSS - Pulsante elegante di Coddy.

L'elemento button in HTML ha un bordo predefinito: personalizziamolo!

Per creare un bordo arrotondato, usa la proprietà border-radius (usa gli stessi valori di padding o margin), ad esempio:

#rounded {
	border-radius: 8px;
}

Per rimuovere completamente il bordo, puoi sovrascriverlo usando:

#no-border {
	border: none;
}

Suggerimento: se imposti border-radius su un valore grande, otterrai una forma circolare!

Sfida

Facile

Attività:

Modifica il raggio del bordo in modo che sia maggiore di 0
Modifica il bordo impostandolo su un valore diverso da quello predefinito

Provalo tu

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Scrivi qui il codice HTML -->
    </body>
</html>

Tutte le lezioni di Progetto CSS - Pulsante elegante

1Introduzione

Introduzione Parte HTML

2Il progetto CSS

Dimensioni

Colori

Bordo e raggio Lezione di progetto

Ombre

Effetto hover

Stile finale

Esercitati da solo: Playground Web