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

La propriété border-bottom-left-radius est utilisée lors de l'ajout de bords arrondis à vos bordures. Cette propriété permet de définir le rayon de la frontière sur le coin inférieur gauche.

Les propriétés CSS

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

La propriété border-bottom-left-radius définit la forme de la bordure du coin inférieur gauche d’un élément .
La propriété border-bottom-left-radius peut être appliqué à tous les éléments HTML.

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é  | NavigateurGoogle Chrome Internet Explorer Firefox Safari Opera
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
  • 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 :

    position

    Indique le type de positionnement d'un élément

    Balise font

    Non pris en charge HTML5. Obsolète en HTML 4.01. Définit la police, la couleur et la taille du texte

    Les balises universelles

    Les balises univercelles : div et span...