La propriété CSS border-radius

Le code de la page (extraits)

... <style> ... div {margin : 10px auto 10px auto; } #container{width :80% ; height : 500px ; border :1px solid black;} #rectangle {width : 400px ; height : 100px ; border-radius :20px ; background : skyblue ; } #cercle {width : 100px ; height : 100px ; border-radius : 50px ; background : lime ; } #ellipse {width : 200px ; height : 150px ; border-radius : 100px / 75px ; background : orange ; } #patate {width : 200px ; height : 100px ; border-radius : 80px 50px 70px 60px ; background : grey ; } img {width :400px ; border-radius : 50px ; } ... <body> ... <div id ="container"> <div id = 'rectangle'></div> <div id = 'cercle'></div> <div id = 'ellipse'></div> <div id = 'patate'></div> </div> <img src ="../images/jolie_fille.jpg" /> ...

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.

Pour vous aussi rogner une image grâce à la propriété clip-path. Voir page suivante.

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.


Retour menu