Soucis avec border-radius
Bonjour à tous,
cela fait longtemps que je n'ai pas posté un petit soucis et j'espère faire dans les rêgles.
J'essaye d'aider quelques personnes à apprendre les feuilles de style pour qu'ils fassent leur propre site.
En révisant mes notes, je tombe sur un soucis avec border-radius et les différentes déclinaisons border-top-left-radius; etc.
Code CSS:
Code:
1
2
3
4
5
6
7
8
9
10
11
|
.cartouche { width:100px;
height:100px;
margin:100px;
border: 3px solid red;
border-radius: 5px 10px 10px 25px/5px 0px 8px 5px;
border-top-left-radius: 5px/5px;
border-top-right-radius:10px/0px;
border-bottom-right-radius:10px/8px;
border-bottom-left-radius:25px/5px;
} |
Code html:
Code:
1
2
|
<div class="cartouche"></div> |
Voir le résultat dans codepen: http://codepen.io/JefReb/pen/KNvLxJ
Les différentes déclinasons ne sont pas prises en compte!
Si je mets en commentaire
Code:
/*border-radius: 5px 10px 10px 25px/5px 0px 8px 5px;*/
J'obtiens un parfait carré. Même si je mets les préfixes -moz- etc.
Pourriez-vous m'indiquer où j'ai oublié quelque chose.
En vous remerciant par avance.
