CSS : propriété CSS 'border-radius'

Si vous visitez cette page avec votre smartphone orientez le "paysage" !

La feuille de style commune aux différents exemples de la page

section {border : none ; border-radius : 20px; } div,h5 {margin : 10px auto 10px auto; background : lime; } h5 p, div 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

css : border-radius

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".

Ombrer boites et images

Ci-dessous boites et images ombrées

Boite ombrée



Boite ombrée et aux coins arrondis


Le code correspondant

<div style ="width : 60% ; height : 100px ; background : lavender; box-shadow : 10px 10px 10px gray;" > <p>Boite ombrée</p> </div> <br> <img src ='../images/brune_nue.jpg' style ="width :50%; box-shadow : 10px 10px 10px gray;" > <br> <div style ="width : 60% ; height : 100px ; background : lavender; box-shadow : -10px -10px 10px gray; border-radius : 50px;" > <p>Boite ombrée et aux coins arrondis</p></div> <br> <img src ='../images/bikini4.jpg' style ="width :50%; box-shadow : -10px -10px 10px gray; border-radius :10%;" >

Avant la version 3 de CSS il fallait beaucoup d'astuces pour ombrer du texte et des boîtes.
Par exemple pour donner l'illusion d'un ombrage de texte il fallait dupliquer ce dernier avec un décalage de quelques pixels par rapport au texte original (emploi de la propriété position avec comme valeur : relative).
Pour donner l'illlusion d'un ombrage de boîte il fallait jouer sur les épaisseurs des bordures. Et encore le rendu n'était pas terrible ou encore produire une boîte grisée décalée de quelques pixels grâce au positionnement relatif.

Pour la propriété box-shadow il y a quatre paramètres à passer : décalage horizontal, décalage vertical, floutage, couleur de l'ombre.
Pour les deux premiers paramètres la valeur peut être négative afin d'inverser la projection de l'ombre.
Pour le troisième paramètre 0px correspond à l'absence de floutage.

Dans l'article suivant je vous présente la propriété clip-path qui permet de dessiner des boites et images ressemblant à des polygones : propriété clip-path
Retour menu