Discussion :

[JefReb]

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 CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

/*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.

[Invité]

Bonjour,

• border-radius

Intéressant à lire et à faire connaitre :

• Glossaire des propriétés CSS

[JefReb]

Merci Jereau
Mais vraiment, je vois pas trop la réponse. sûr que j'ai déjà lu ces doc sur radius et d'autres. Je vois pas ce qui bloque l'exécution des déclinaisons de Border-radius.

Bon comme je l'avais écrit, j'ai aussi essayé en mettant les préfixes, mais ça ne change rien. Même dans Firebug ça n'apparait pas.

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.cartouche 	{ 
width:100px; 
height:100px;
margin:100px; 
border: 3px solid red; 	
 
-moz-border-top-left-radius: 5px/5px;
-webkit-border-top-left-radius: 5px/5px;
-o-border-top-left-radius: 5px/5px;
-ms-border-top-left-radius: 5px/5px;
 border-top-left-radius: 5px/5px;  
 
-moz-border-top-right-radius:10px/0px;
-webkit-border-top-right-radius:10px/0px;
-o-border-top-right-radius:10px/0px;
-ms-border-top-right-radius:10px/0px;
border-top-right-radius:10px/0px;
 
-moz-border-bottom-right-radius:10px/8px;
-webkit-border-bottom-right-radius:10px/8px;
-o-border-bottom-right-radius:10px/8px;
-ms-border-bottom-right-radius:10px/8px;
border-bottom-right-radius:10px/8px;
 
-moz-border-bottom-left-radius:25px/5px;
-webkit-border-bottom-left-radius:25px/5px;
-o-order-bottom-left-radius:25px/5px;
-ms-border-bottom-left-radius:25px/5px;
border-bottom-left-radius:25px/5px;         				 
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="cartouche"></div>

Pourquoi les angles ne sont pas pris en compte et affiche un carré?
voir: http://codepen.io/JefReb/pen/RoLGqN

[Invité]

Exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

border-top-left-radius: 5px/5px;

Je doute que tu l'aies vu écrit comme ça... (avec ou sans préfixe)

Regarde bien...

[JefReb]

Ha mille merci Jreaux
Sûr j'ai vu mon erreur. A force de regarder on ne voit pas toujours et c'est le regard de l'autre qui aide.
Bien vu, erreur stupide de ma part
Encore merci.

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
border-top-left-radius: 8px 15px;
border-top-right-radius:50px 5px; 
border-bottom-right-radius:50px 8px; 
border-bottom-left-radius:10px 5px;

Je clos le topic