Raggio del bordo

Fa parte della sezione Stilizzare con CSS del percorso HTML di Coddy. Lezione 40 di 76.

In CSS, la proprietà border-radius si usa per creare angoli arrotondati per un elemento. Questa proprietà ti permette di specificare il raggio della curvatura di ciascun angolo, dandoti il controllo sulla forma del bordo dell'elemento. Ecco la sintassi di base per usare la proprietà border-radius:

selector {
    border-radius: value;
}

value: Il raggio desiderato per gli angoli arrotondati, che può essere specificato in pixel (px), em (em), percentuali (%) o altre unità CSS valide.

Puoi specificare un singolo valore per applicare lo stesso raggio a tutti e quattro gli angoli. Nell'esempio seguente, tutti gli elementi <div> avranno angoli arrotondati con un raggio di 10px.

div {
    border-radius: 10px;
}

Puoi impostare valori diversi per ogni angolo individualmente, usando il seguente ordine: in alto a sinistra, in alto a destra, in basso a destra, in basso a sinistra.

.button {
    border-radius: 10px 20px 30px 40px;
}

Puoi anche specificare solo due valori: il primo si applicherà agli angoli in alto a sinistra e in basso a destra, e il secondo agli angoli in alto a destra e in basso a sinistra.

img {
    border-radius: 20px 50px;
}

Sfida

Facile

Ti viene fornito un documento HTML con due elementi <div>, ciascuno con le classi "one" e "two". Segui i passaggi riportati di seguito:

Scrivi una regola CSS usando un selettore di classe per selezionare tutti gli elementi con la classe “one”. Imposta il bordo su 3px solid #4287f5 e il border-radius su 15px per dare a tutti gli angoli la stessa forma arrotondata.
Scrivi una regola CSS usando un selettore di classe per selezionare tutti gli elementi con la classe “two”. Imposta il bordo su un valore qualsiasi e il border-radius su un valore qualsiasi a tua scelta.

Provalo tu

<html>
<head>
    <title>Border Radius</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="one">This is a division with rounded corners.</div>
    <div class="two">This is another division with rounded corners.</div>
</body>
</html>