La propriété CSS3 border-radius

La propriété CSS border-radius est un raccourci pour définir plusieurs propriétés "border radius"  en un seul endroit. Il s'agit d'un moyen efficace d'ajouter des coins arrondis aux bordures d’un élément HTML.
La propriété border-radius définit :  border-top-left-radius, border-top-right-radius, border-bottom-left-radius et border-bottom-right-radius.
La propriété border-radius doit être utilisé en conjonction avec la propriété border (ou toute autre propriété  pour définir la frontière réelle).

Les propriétés CSS

Définition et utilisation de la propriété border-radius

La propriété border-radius est une propriété raccourcie pour fixer les rayons des quatre coins de la bordure.

Astuce : Cette propriété vous permet d'ajouter des coins arrondis aux bordures des éléments html!

Valeur par défaut : 0
Héritée : No
Animer : Oui.
Version: CSS3
Syntaxe JavaScript : objet. style.borderRadius="20px"

Appui de navigateur de la propriété border-radius

Les nombres dans le tableau spécifient la version à partir de laquelle  le navigateur prend totalement en charge la propriété border-radius.

Les numéros suivis du préfixe - webkit- ou - moz- spécifier la première version qui a fonctionné  avec ce préfixe.

Propriété  | NavigateurGoogle Chrome Internet Explorer Firefox Safari Opera
border-radius 5.0
4.0 -webkit-
9.0 4.0
3.0 -moz-
5.0
3.1 -webkit-
10.5

Syntaxe CSS de la propriété border-radius

border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;

Remarque : Les quatre valeurs pour chaque rayon sont données dans l'ordre : haut  gauche, haut droit, bas droit, bas  gauche. Si la bas gauche est omis c'est la valeur du  haut  droit qui sera utilisée. Si le bas droit est omis c'est la valeur du  haut gauche qui le remplace. Si haut  droit est omis il prend la même valeur  que le haut gauche.

Donc si vous fournissez une seule valeur, elle déterminera le rayon des quatre coins

Pour définir un rayon horizontal différent du vertical, utilisez une barre oblique pour les séparer ( / ). La valeur sur le côté gauche de la barre oblique détermine le rayon horizontal . La valeur sur le côté droit détermine le rayon vertical .

Valeurs de propriété border-radius

Valeur Description
length Définit le rayon des coins en px, pt, cm, em, etc... La valeur par défaut est 0
% Définit le rayon des coins en%
initial Définit cette propriété à sa valeur par défaut.
inherit Hérite  cette propriété de son élément parent.

Exemple 1

border-radius:1em;

Ce qui est équivalent à :

border-top-left-radius:1em;
border-top-right-radius:1em;
border-bottom-right-radius:1em;
border-bottom-left-radius:1em;
Exemple 2

border-radius: 1.5em 2em 3.5em / 0.6em 4em;

Ce qui est équivalent à:

border-top-left-radius: 1.5em 0.6em;
border-top-right-radius: 2em 4em;
border-bottom-right-radius: 3.5em 0.6em;
border-bottom-left-radius: 2em 4em;

Exemple 3

Sélectionner le code

<!doctype html>
<html>
<head>
<style type="text/css">
.bordures-arrondies {
width:300px;
height:80px;
padding:10px;
border: 1px solid crimson;
-webkit-border-radius:  25px 10px 10px 40px/20px; /* Chrome et Safari
*/
-moz-border-radius: 25px 10px 10px 40px/20px; /* Firefox */
-ms-border-radius: 25px 10px 10px 40px/20px; /* Internet Explorer */
-o-border-radius: 25px 10px 10px 40px/20px; /* Opera */
border-radius:25px 10px 10px 40px/20px; /* CSS3 */
}
</style>
</head>
<body>
<div class="bordures-arrondies">
Cet élément a les cois arrondis.
</div>
</body>
</html>

 


Par Gerywa 11 Janvier 2016
  • HTML5, CSS3, JavaScript pour débutants Tome 1 HTML5, CSS3, JavaScript pour débutants Tome 1
    Premier tome d\'une série vidéo dédiée à l\'apprentissage des langages HTML, CSS et JavaScript.

    Regarder aussi nos cours :

    fonction gettimeofday">gettimeofday()

    Retourne l'heure actuelle

    fonction strncasecmp, strncasecmp

    Compare en binaire des chaînes de caractères

    Balise s

    Définit un texte barré