-moz-border-radius


Visible avec Gecko uniquement (Mozilla 1.6, FireFox 0.8, Galeon 1.3.12, Epiphany...).
Pré-implémentation par -Moz-illa d'une propriété du futur module CSS3 "border".
Quelques liens.

Voici quelques exemples - un peu brouillons - de ce que l'on peut faire avec -moz-border-radius et de quelques limites.

( -khtml-border-radius ne marche pas. )


-moz-border-radius

-moz-border-radius:1em;

-moz-border-radius:1em 0;

-moz-border-radius:0 1em 1em 0;

item 1 item 2 Amary Iris 4 item 5 item 6 item 7
item 1 item 2 Amary Iris 4 item 5 item 6 item 7
item 1 item 2 Amary Iris 4 item 5 item 6 item 7
"Arrondir les angles"
Ça tourne rond ?

p#t4 {border-style:dashed dashed dotted dotted;-moz-border-radius:1em 0 0 0;}
p#t4:hover {-moz-border-radius:0;}

-moz-border-radius (avec valeur non nulle) supprime les pointillés (dotted et dashed).




image en background
les coins dépassent

Les images et les images en background dépassent des coins arrondis...
Le :hover est actif également en dehors de la bordure, dans les angles.
(https://bugzilla.mozilla.org/show_bug.cgi?id=24998)



Ceci est un <div> avec overflow:auto; et padding:2em;
Le padding n'a pas le même effet que dans un textarea (sauf à gauche) : La bordure ne contourne pas au large la scrollbar, ni par la droite ni par le haut et le bas. Conséquence, malgré le padding, le texte frôle la bordure haute (et basse) quand on scrolle.

-moz-border-radius:49%;
width:300px; height:60px;



form :focus {border-color:#F88; color:blue}





-moz-outline
cohabite mal avec
-moz-border-radius
0-   0-
+
=^
Toto, réveille toi !

 
web-jardin, Haut