Arrondissement des bordures de bloc en CSS
Maintenant, nous allons apprendre à arrondir les coins
d'un bloc. Pour cela, il faut utiliser la
propriété border-radius, qui accepte
une valeur en pixels.
Que signifie le fait que nous ayons spécifié un arrondi,
par exemple, de 10px ? C'est le rayon du cercle
que l'on peut inscrire dans cet arrondi. Si
vous n'êtes pas à l'aise avec les mathématiques et que
vous ne comprenez pas la dernière phrase - oubliez-la et
ajustez simplement l'arrondi à l'œil. Avec
un peu d'expérience, ce n'est pas un problème (il n'existe pas
d'outil de mesure pour mesurer les arrondis,
du moins, je n'en ai jamais entendu parler).
Arrondissons les coins d'un bloc en lui donnant
un arrondi de 10px :
<div id="elem"></div>
#elem {
width: 300px;
height: 100px;
border: 1px solid red;
border-radius: 10px;
}
:
Reproduisez la page selon cet exemple :
