border-radius |
Rayon de bordure |
|---|---|
| CSS |
Syntaxe
|
border-radius: paramètres; |
Paramètres
| Paramètre | Description | |||||
|---|---|---|---|---|---|---|
| paramètres | Ce paramètre de propriété permet d'indiquer le rayon de la bordure : | |||||
| Valeur | Aperçu | Description | ||||
| largeur | Ceci est un texte d'exemple de 10px |
Cet attribut permet d'indiquer la longueur du rayon en pixels spécifié de la bordure. | ||||
| %largeur | Ceci est un texte d'exemple de 50% |
Cet attribut permet d'indiquer le pourcentage du rayon de la bordure. | ||||
Description
Cette propriété permet de définir l'arrondissement des coins de la bordure d'un élément.
Remarques
- Si cette propriété n'est pas supporté, vous devrez utiliser des alternatives comme CSS3Pie ou DD_roundies (soit un fichier JavaScript Roundies.js) de Drew Diller.
- Définition et rôle : La propriété border-radius permet de créer des coins arrondis sur les éléments HTML. Elle simplifie considérablement le design en rendant inutile l'utilisation d'images ou de techniques complexes pour obtenir cet effet visuel, tout en améliorant l'esthétique des interfaces modernes.
- Valeurs acceptées : border-radius accepte des valeurs exprimées en unités absolues (comme px) ou relatives (comme %). Une valeur en pixels définit un rayon fixe, tandis qu'une valeur en pourcentage est calculée par rapport à la taille de l'élément, ce qui permet des coins arrondis proportionnels à ses dimensions.
- Application aux formes circulaires : En utilisant une valeur de 50% pour border-radius, un élément carré devient parfaitement circulaire. Cette propriété est fréquemment utilisée pour des images de profil ou des boutons circulaires dans des interfaces utilisateur modernes.
- Syntaxe simplifiée et personnalisable : border-radius permet une syntaxe raccourcie pour définir les coins de manière uniforme (exemple : 10px pour tous les coins) ou individuellement en spécifiant jusqu'à quatre valeurs (par exemple : 10px 20px 30px 40px), chaque valeur correspondant à un coin en commençant par le coin supérieur gauche, dans le sens des aiguilles d'une montre.
- Effet sur les bordures et le contenu : Les coins arrondis affectent non seulement la bordure mais aussi le contenu de l'élément. Par exemple, si une image ou un texte dépasse les limites de l'élément, ces débordements seront également arrondis, créant un effet d'intégration harmonieuse.
- Compatibilité avec des arrière-plans complexes : Lorsque des arrière-plans complexes (comme des dégradés ou des images) sont utilisés, border-radius les applique uniformément, arrondissant à la fois les bordures et les arrière-plans. Cela permet une transition fluide entre les coins et les bords droits.
- Animation dynamique : La propriété border-radius est animable avec les transitions CSS. En modifiant ses valeurs progressivement, il est possible de transformer une forme rectangulaire en cercle, ou de passer d'arrondis légers à des coins totalement carrés, créant des effets visuels interactifs.
- Compatibilité des navigateurs Web : La propriété border-radius est largement prise en charge par tous les navigateurs modernes. Les versions antérieures à la spécification finale nécessitaient des préfixes spécifiques (comme -webkit-border-radius), mais ces préfixes ne sont plus nécessaires dans les navigateurs récents.
Exemple
Voici un exemple montrant comment afficher un tableau avec des coins arrondis si vous supportez les CSS3 :
Voici le résultat affiché :
| Ici il y a un du contenu dans le tableau |
Dernière mise à jour : Dimanche, le 20 décembre 2015