Html - CSS3 border radius

CSS3 border radius

CSS3 border radius

Par Mathieusub, publié le 31/01/2012 à 13:09:13

Bonjour à tous !

Voici un petit tutoriel sur la propriété "Border-radius" en CSS3. Celle-ci vous permettra de réaliser des coins arrondis sur les éléments de type "block".

Voici un petit exemple d'utilisation :

.border_raduis {

  border-radius: 10px;

}

Ici nous avons créer une class nommé "border_raduis", qui applique un angle de 10px aux quatre coins d'un "block".

Voici le résultat visuel de ce bout de code CSS :

Il est également possible de définir l'arrondi de chacun des angles, à l'aide d'une écriture raccourcie qui se lit comme à l'accoutumée dans le sens des aiguilles d'une montre en débutant par le haut à gauche (haut gauche, haut droite, bas droite, bas gauche).

.border_raduis {

  border-radius: 10px 0px 10 0px;

}

Voici le résultat visuel de ce bout de code CSS :

Attention, cette propriété n'est pas supporté par tous les navigateurs internet, voici donc les supports de base :

- Firefox : 4.0 (2.0)
- Chrome : 4.0, 0.2 -webkit
- Internet Explorer : 9.0
- Opéra : 10.5
- Safari : 5.0, 3.0 -webkit

Et voilà, ce tutoriel est terminé !
(Si vous le souhaitez, un exemple est téléchargeable en bas du site)
Si vous avez des questions, n'hésitez pas à faire des commentaires.
A bientôt sur le site !

Téléchagement

Téléchargement du fichier source

border_radius.html - 444 octets

Vous devez être connecté pour télécharger ce fichier zip

2 commentaires

Par le 01/03/2012 à 10:24:56 Note : 2/5

Bonjour,
Un tutoriel pour débutant qui manque quelque peu de précision :
- Le premier radius déclaré est celui du haut à gauche (et non du haut tout court).
- Quels sont les navigateurs supportant cette propriété ?
- S'agit-il de CSS2.1 ou CSS3 ?
- Pourquoi n'y a-t-il pas la mention des radius en pourcentage (bien pratique pour créer un cercle), ou de l'utilisation optionnelle du slash entre deux valeurs qui permet d'appliquer des radius encore plus précis ?
- border-radius n'est pas une "fonction" mais une "propriété"
- ta classe .border-raduis comporte certainement une erreur

Je pense qu'il faut faire très attention sur les tutoriels pour débutant, la moindre erreur peut perturber la personne en quête de savoir :)

Merci pour le partage.