La propriété CSS border-bottom-left-radius

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

La propriété CSS border-bottom-left-radius permet de définir le rayon de la bordure inférieure gauche d'un élément. Cela signifie qu'elle permet de créer un arrondi sur la bordure inférieure gauche de l'élément.

Pour utiliser cette propriété, il suffit de l'ajouter à l'élément concerné dans les règles de style CSS. Par exemple, pour ajouter un arrondi de 5 pixels sur la bordure inférieure gauche d'un élément ayant la classe "ma-classe", on écrirait :

.ma-classe {
  border-bottom-left-radius: 5px;
}

Il est également possible de définir des rayons différents pour les coins horizontaux et verticaux de l'élément en utilisant deux valeurs séparées par un espace. Par exemple :

.ma-classe {
  border-bottom-left-radius: 10px 5px;
}

Cela créerait un arrondi de 10 pixels de rayon sur l'axe horizontal et de 5 pixels de rayon sur l'axe vertical de la bordure inférieure gauche de l'élément.

Il est important de noter que cette propriété n'est disponible que dans les navigateurs qui prennent en charge les règles de style CSS3. Si vous souhaitez garantir une compatibilité avec les navigateurs plus anciens, vous devrez peut-être utiliser des propriétés de bordure alternatives ou des techniques de dégradé pour créer des arrondis sur les bordures de vos éléments.

Astuce : la propriété border-bottom-left-radius doit être utilisé en conjonction avec la propriété border (ou une autre propriété qui définit des frontières) afin d’obtenir la frontière réelle.!

Valeur par défaut :	0
Héritée :	no
Animer :	Oui.
Version:	CSS3
Syntaxe JavaScript :	objet.style.borderBottomLeftRadius="25px"

Syntaxe CSS de la propriété CSS border-bottom-left-radius

border-bottom-left-radius: valeur1 valeur2|initial|inherit;

Remarque : Les deux valeurs peuvent être des nombres ou des pourcentages qui définissent les rayons horizontal et vertical du quart de l'ellipse qui définit la forme du coin de la bordure de la frontière extérieure d’un élément. La première valeur est le rayon horizontal, le second le rayon vertical. Si la deuxième valeur n’est pas fournie elle sera donnée égale à la première. Si chaque les deux sont nulles, le coin est carré, et n’est pas arrondis.
Vous pouvez fournir une ou deux valeurs :
Si vous fournissez une seule valeur, elle déterminera à la fois le rayon horizontal et le rayon vertical.
Si vous fournissez deux valeurs, la première valeur détermine le rayon horizontal, et la deuxième valeur détermine le rayon vertical.

Valeurs de propriété CSS border-bottom-left-radius

Valeur	Description
length	Un nombre définissant le rayon de l’arrondie. La valeur par défaut est 0
%	Un pourcentage définissant le rayon de l’arrondie. La valeur par défaut est 0.
initial	Met la valeur de la propriété à sa valeur par défaut.
inherit	Si cette valeur est indiquée, la propriété est héritée du parent.

Appui de navigateurs de la propriété CSS border-bottom-left-radius

Les nombres dans le tableau spécifient la version à partir de laquelle le navigateur prend totalement en charge la propriété border-bottom-left-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é \| Navigateur
border-bottom-left-radius	5.0 4.0 -webkit-	9.0	4.0 3.0 -moz-	5.0 3.1 -webkit-	10.5

Exemples : Exemple d’utilisation de la propriété border-bottom-left-radius

Sélectionner le code


<!doctype html>
<html>
<head>
<style type="text/css">
. arrondi {
width:250px;
height:70px;
padding:10px;
border: 1px dotted #141BED;
border-bottom-left-radius: 35px 20px;
-webkit-border-bottom-left-radius: 35px 20px; /* Safari et Chrome */
-moz-border-bottom-left-radius: 35px 20px; /* Firefox */
-ms-border-bottom-left-radius: 35px 20px; /* Internet Explorer */
-o-border-bottom-left-radius: 35px 20px; /* Opera */
}
</style>
</head>
<body>
<div class="arrondi">
Cet élément a le coin inférieur gauche arrondi.
</div>
</body>
</html>

Exemple pour voir une animation de l’arrondie du coin inférieur gauche

Sélectionner le code


<!DOCTYPE html>
<html>
<head>
<style>
#monDiv {
    width: 350px;
    height: 250px;
    border: 1px solid black;
    -webkit-animation: monAnimation 5s infinite; /* Chrome, Opera et Safari */
    animation: monAnimation 3s infinite;
}
/* Chrome, Opera, Safari */
@-webkit-keyframes monAnimation {
    40% {border-bottom-left-radius: 70px;}
}
/* La syntaxe Standard pour les versions qui la supportent */
@keyframes monAnimation {
    40% {border-bottom-left-radius: 70px;}
}
</style>
</head>
<body>
<p>On agissant sur la propriété border-bottom-left le rayon est changé graduellement de 0 à 70px puis revenir à l'état initial
:<p>
<div id="monDiv"></div>
<p>La propriété border-bottom-left-radius est<em>animable</em> en CSS 3.</p>
<p><b>Remarque:</b> CSS Animation ne fonctionne pas dans Internet Explorer 9 et versions inférieurs.</p>
</body>
</html>

Exemple: Arrondir le coin inférieur gauche en utilisant le JavaScript

Sélectionner le code


<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
    border: 1px solid black;
    width: 300px;
    height: 300px;
}
</style>
</head>
<body>
<p>Cliquer sur le bouton Tester pour arrondir le coin inférieur gauche de l'élément Div avec la propriété border-bottom-left-radius:</p>
<button onclick="maFonction()">Tester</button>
<div id="myDIV">
  <h1>Il est fontastique le JavaScript!!</h1>
</div>
<script>
function maFonction() {
    document.getElementById("myDIV").style.borderBottomLeftRadius =
"25px";
}
</script>
</body>
</html>

Par Gerywa 05 Fevrier 2016