Border-radius récalcitrant

Le
Pascale
Je me bagarre avec border radius pour obtenir le même effet que dans
l'exemple 3 (et 7) de cette page : http://www.the-art-of-
web.com/css/border-radius/ (angle arrondi en haut à gauche et en bas à
droite, angle droit ailleurs.) pour une div.

J'ai donc mis :

border-radius: 30px 0;
-moz-border-radius: 30px 0;
-webkit-border-radius: 30px 0;

Malheureusement, j'obtiens des angles arrondis aux 4 coins comme si j'avais
mis simplement border-radius: 30px;
Le résultat est le même pour Opera, Safari et Firefox. J'ai donc essayé la
syntaxe indiquée sur le site mentionné plus haut :

border-bottom-right-radius: 30px;
-moz-border-radius-bottomright: 30px;
-webkit-border-bottom-right-radius: 30px;
border-top-left-radius: 30px;
-moz-border-radius-topleft: 30px;
-webkit-border-top-left-radius: 30px;

C'est plus long et pas mieux. Je suppose qu'il y a quelque chose d'évident
que je n'ai pas vu, mais quoi ?

--
Pascale
http://www.la-grille-verte.net
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Olivier Masson
Le #24020511
Le 30/11/2011 19:43, Pascale a écrit :
Je me bagarre avec border radius pour obtenir le même effet que dans
l'exemple 3 (et 7) de cette page : http://www.the-art-of-
web.com/css/border-radius/ (angle arrondi en haut à gauche et en bas à
droite, angle droit ailleurs.) pour une div.

J'ai donc mis :

border-radius: 30px 0;
-moz-border-radius: 30px 0;
-webkit-border-radius: 30px 0;

Malheureusement, j'obtiens des angles arrondis aux 4 coins comme si j'avais
mis simplement border-radius: 30px;
Le résultat est le même pour Opera, Safari et Firefox. J'ai donc essayé la
syntaxe indiquée sur le site mentionné plus haut :

border-bottom-right-radius: 30px;
-moz-border-radius-bottomright: 30px;
-webkit-border-bottom-right-radius: 30px;
border-top-left-radius: 30px;
-moz-border-radius-topleft: 30px;
-webkit-border-top-left-radius: 30px;

C'est plus long et pas mieux. Je suppose qu'il y a quelque chose d'évident
que je n'ai pas vu, mais quoi ?




Il n'y a aucune raison que ça ne fonctionne pas. J'utilise tous les
jours ce type de syntaxe, par contre sans raccourci :
border-radius : 30px 0 30px 0;
SAM
Le #24020501
Le 30/11/11 19:43, Pascale a écrit :
Je me bagarre avec border radius

border-radius: 30px 0;
-moz-border-radius: 30px 0;
-webkit-border-radius: 30px 0;



Pas de blème avec mes navigateurs (à jour)

Malheureusement, j'obtiens des angles arrondis aux 4 coins comme si j'avais
mis simplement border-radius: 30px;



et que t'indique Firebug comme règles css pour cet élément ?

(il y a certainement un autre border-radius donné ailleurs dont
l'élément hérite)
--
Stéphane Moriaux avec/with iMac-intel
Pascale
Le #24021391
Tout d'abord, merci à tous les deux pour votre réponse.

C'est la libellule d'Opera qui m'a fait voir ma .onnerie (-: , une autre
feuille de style que j'appelais sans nécessité.

Grmbl.

Mais maintenant ça marche ! (:
http://www.mobilsport.fr

--
Pascale
http://www.la-grille-verte.net
Publicité
Poster une réponse
Anonyme