Les coins arrondis en CSS
Les coins arrondis sont utilisés pour ajouter un coin coloré
spécial au corps ou au texte en utilisant la propriété border-radius. Une
syntaxe simple des coins arrondis est la suivante –
#coins {
border-radius: 60px/15px;
background: #FF0000;
padding: 20px;
width: 200px;
height: 150px;
}
les valeurs possibles pour les angles arrondis sont comme
suit -
- border-radius : Utilisez cet élément pour définir la propriété de quatre rayons frontière
- border-top-left-radius : Utilisez cet élément pour définir la frontière du coin supérieur gauche
- border-top-right-radius :Utilisez cet élément pour définir la frontière du coin supérieur droit
- border-bottom-right-radius : Utilisez cet élément pour définir la frontière du coin inférieur droit
- border-bottom-left-radius : Utilisez cet élément pour définir la frontière du coin inférieur gauche
Exemple :
Cette propriété peut avoir deux valeurs. L'exemple suivant
utilise à la fois les valeurs –
<html>
<head>
<style>
#coins1 {
border-radius: 25px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#coins2 {
border-radius: 25px;
border: 2px solid #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<p id="coins1"> Coins arrondis!</p>
<p id="coins2"> Coins arrondis!</p>
</body>
</html>
Chaque
propriété Corner :
Nous pouvons spécifier la
propriété de chaque coin comme illustré ci-dessous exemple
<html>
<head>
<style>
#rcorners1 {
border-radius: 15px 50px 30px 5px;
background: #f3733a;
padding: 20px;
width: 100px;
height: 100px;
}
#rcorners2 {
border-radius: 15px 50px 30px;
background: #f3733a;
padding: 20px;
width: 100px;
height: 100px;
}
#rcorners3 {
border-radius: 15px 50px;
background: #f3733a;
padding: 20px;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<p id="rcorners1"></p>
<p id="rcorners2"></p>
<p id="rcorners3"></p>
</body>
<body>
Hello, my name is Jack Sparrow. I'm a 50 year old self-employed Pirate from the Caribbean. 
Leave a Comment