Comment avoir des div avec des coins arrondis + Générateur CSS

  Tutos   -   21/06/2015


Ce tutoriel va vous expliquer comment avoir des div avec des coins arrondis en utilisant CSS. La connaissance de CSS peut être basique. Vous pouvez simplement copier / coller le code CSS et personnaliser après.

1. CSS code pour le style

Le code CSS n'est pas forcément très court, comme un simple bout de code à copier / coller. Cela est dû au fait qu'il n'y a pas vraiment de directive unique entre les éditeurs de navigateur pour prendre en charge les coins arrondis. Dans le doute, je pense que nous devrions tous les intégrer ^^. Non, mais plus sérieusement, nous allons voir plus en détails quel attribut correspond à quel navigateur.


.div_avec_coins_arrondis{
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	
	background-color:#EFEFEF;
	padding:10px;
	width:100%;
	text-align:left;
}


2. Résultat

Voici le contenu de ma div. J'ai également ajouté un padding pour que le texte ne touche pas la bords de la div. Cela facilite la lecture.

Détails sur les différents attributs liés aux coins arrondis


  • border-radius : Cette propriété est prise en compte par CSS3.
  • -webkit-border-radius : Cette propriété est prise en compte par Safari et Chrome.
  • -moz-border-radius :Cette propriété est prise en compte par Mozilla.
  • -o-border-radius : Cette propriété est prise en compte par Opera. Mais il ne semble pas être le cas aujourd'hui. Il devrait remplacé par border-radius.
  • -khtml-border-radius : Cette propriété est prise en compte par Konqueror. Comme l'attribut précédent, il ne semble plus être utilisé aujourd'hui, utilisez border-radius à la place.
Le rayon est ici de 10 pixels pour tous les coins. Maintenant, nous allons voir comment faire pour avoir uniquement certains coins arrondis et avec des rayon différents pour chaque coin sur la même div.

3. Taille différente de rayon sur la même div

Voici un exemple où nous avons des coins arrondis uniquement en haut à droite et en bas à gauche. La personnalisation est vraiment facile à utiliser, et reste évidement à faire pour chaque navigateur.


.div_forme_1 {
	border-top-right-radius: 30px;
	border-bottom-left-radius: 30px;	
	-webkit-border-top-right-radius: 30px;
	-webkit-border-bottom-left-radius: 30px;
	-moz-border-radius-topright: 30px;
	-moz-border-radius-bottomleft: 30px;
	height:80px;
	width:80px;
}

.div_forme_2 {
	border-top-left-radius: 10px;
	border-top-right-radius: 20px;
	border-bottom-right-radius: 30px;
	border-bottom-left-radius: 40px;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 20px;
	-webkit-border-bottom-right-radius: 30px;
	-webkit-border-bottom-left-radius: 40px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 20px;
	-moz-border-radius-bottomright: 30px;
	-moz-border-radius-bottomleft: 40px;
	height:80px;
	width:80px;
}


Résultat

Forme 1

Forme 2


Il est probablement évident avec l'exemple "Forme 2" que chaque coin peut avoir son propre rayon et surtout quels sont les attributs à utiliser pour le faire.
Juste pour s'en assurer voici la liste des attributs pour chaque coin :

Attribut principal Dérivé pour chaque coin
border-top-left-radius border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
-webkit-border-radius -webkit-border-top-left-radius
-webkit-border-top-right-radius
-webkit-border-bottom-right-radius
-webkit-border-bottom-left-radius
-moz-border-radius -moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomright
-moz-border-radius-bottomleft

4. Cercle et Ovale


Il est également possible d'aller jusqu'à obtenir un disque ou une forme ovale.


.cercle_div {
	border-top-right-radius: 20px;
	-webkit-border-top-right-radius: 20px;
	-moz-border-radius-topright: 20px;
	height:40px;
	width:40px;
}
.ovale_div {
	border-radius: 100px / 50px;
	-webkit-border-radius: 100px / 50px;
	-moz-border-radius: 100px / 50px;
	width: 200px;
	height: 100px;
}



Result

Cercle

Ovale



Bords uniquement

Bien sûr, toutes les formes que nous avons vues peuvent être utilisés que pour dessiner la bordure.

Forme 1


Forme 2


Cercle


Ovale


Générateur de code CSS

Finalement et pour vous simplifier la vie, nous avons ajouté un outil permettant de générer automatiquement le code CSS pour votre div. Vous n'avez plus qu'à mettre le rayon en pixels que vous souhaitez pour chaque coin et il vous donnera automatiquement le code pour l'ensemble de la div. Evidement, il s'agit d'un résultat automatique qui peut être optimisé suivant le résultat que vous attendez.

px
px

px
px

Conclusion

Pour résumer brièvement, dans ce tuto, on a vu comment créer des div avec des coins arrondis. On a vu comment avoir un rayon différent pour chaque coin et également comment faire pour rendre notre code avec la plupart des navigateurs.


Tags :  
CSS
  
HTML
  


Autodidacte passionné par le web, je suis toujours à la recherche de nouveaux challenges.
Fondateur de Online-Free-Tools.com.



  Commentaires


Pas de commentaire

Ajouter un commentaire




 FR     EN  

Copyright 2020 -   Contact us - 20/01/2020 20:05:56
MUTORI - Création d'applications web et mobiles   par Pierrick Cusset