La propriété CSS border-radius

Le code CSS commun aux différents exemples de la page

section {border : none ; border-radius : 20px; } div,h5 {margin : 10px auto 10px auto; background : lime; } h5 p {text-align : center; line-height : 100px; }

Notez la propriété "border-radius pour la boite SECTION.
Avec CSS3 les boites peuvent prendre des formes diverses grâce à la propriété border-radius et les différentes méthodes de paramétrage de cette propriété.

Première approche

Le code correspondant

<section style ="width :400px ; height : auto ; border :1px solid black;"> <div id = 'rectangle' style ="width : 300px ; height : 100px ; border-radius : 20px ;"></div> <div id = 'cercle' style ="width : 100px ; height : 100px ; border-radius : 50px ;" ></div> <div id = 'ellipse' style ="width : 200px ; height : 150px ; border-radius : 100px / 75px ;"></div> <div id = 'patate' style ="width : 200px ; height : 100px ; border-radius : 80px 50px 70px 60px ;" ></div> </section> <img src ="../images/jolie_fille.jpg" style ="display : block ; width :300px ; border-radius : 50px ;"/>

Commentaire du code

Grâce à la propriété CSS border-radius on peut produire des boîtes avec des angles arrondis mais aussi des cercles et des ellipses, etc.
Comme vous pouvez le constater à la lecture du code, la propriété border-radius peut aussi s'appliquer à une image de type "block".

Radius veut dire rayon. Donc dans le cadre de cette propriété vous devez préciser le rayon de l'arc de cercle qui arrondit l'angle.

Observez bien le code CSS de cette page. Vous constatez que la propriété border-radius admet plusieurs syntaxes.

Pour dessiner un cercle il suffit de créer un carré (largeur = hauteur) et demander que les angles soient arrondis avec un rayon égal à la moitié du côté du carré. Donc la première syntaxe de cette propriété est : border-radius : valeur du rayon.

Pour dessiner une ellipse il suffit de créer un rectangle et demander que les angles soient arrondis avec un rayon horizontal égal à la moitié de la largeur et un rayon vertical égal à la moitié de la hauteur. Donc la syntaxe de la propriété est alors : border-radius : rh / rv. Avec rh : rayon: horizontal et rv : rayon vertical.

Pour dessiner une patate il faut dessiner un rectangle et demander que les quatre angles aient des rayons différents. La syntaxe de la propriété devient donc : border-radius : hg hd bd bg. Avec hg : rayon angle haut gauche, hd : rayon angle haut droit, bd : rayon angle bas droit et bg : rayon angle bas gauche.

Tests complémentaires

Il faut maintenant trouver les limites de la propriété.

boite 1

boite 2

boite 3

Le code correspondant

<section style = "width :80%; height : auto ; border :1px solid black;" > <h5 style ="width : 80%; height :100px; border-radius : 50px ;"><p>boite 1</p></h5> <h5 style ="width : 80%; height :100px; border-radius : 10% ;">boite 2</h5> <h5 style ="width : 80%; height :100px; border-radius : 10% / 20px ;">boite 3</h5> <img src ='../images/jolie_fille.jpg' style ="display : inline ;width :40%; border-radius :50px;"> <img src ='../images/brune_nue.jpg' style ="display : inline ;width :40%;border-radius : 50px;" > </section>

Commentaire

Même si la largeur de la boite est exprimée en % on peut applquer la propriété border-radius (voir boite 1).
Si la valeur de border-radius est exprimée en % alors que la largeur de la boite est aussi exprimée en % l'arrondi est uniquement horizontal (voire boite 2). Pour obtenir un arrondi vertical il faut alors utiliser la syntaxe : border-radius : rx/ry (avec ry exprimé en pixels). Voir boite 3.

Border-radius peut s'appliquer à des images même si elles sont "inline" ou "inline-block".

Des boites ayant les formes les plus diverse

Vous pouvez aussi rogner une image grâce à la propriété clip-path.

Ci-dessous une image en forme de triangle. Pour en savoir plus visitez la page suivante !
Retour menu