28172 sujets

CSS et mise en forme, CSS3

Border-radius : arrondir certains coins mais pas tous

Coucou,
je découvre en ce beau matin d'hiver l'existence de la propriété "border-radius" (CSS3)

Ça marche déjà pour les navigateurs Gecko apparemment, ce qui est déjà bien sympa.

J'ai appliqué, j'en suis satisfait; maintenant je veux aller un tout petit peu plus loin et arrondir, par exemple, tous les coins sauf le supérieur droit.

J'ai trouvé ceci sur un bon tuto:
http://www.e-t172.net/articles/round/
	border-radius: 15px 15px;
	-moz-border-radius: 15px;


J'aimerais comprendre un peu mieux son usage, et surtout s'il est possible de régler cette propriété pour qu'elle n'arrondisse que un ou plusieurs coins choisis de mon cadre.

Allei, merci!
Liévin
Modifié par rutabaga6 (13 Feb 2008 - 09:08)
Voilà, j'ai corrigé le lien: http://www.e-t172.net/articles/round/

Euh, pour ce tuto d'Alsa, c'est de là que j'ai commencé ma recherche. Mais il ne parle pas de l'emploi de la propriété "border-radius", il la cite juste sans l'aborder. Merci quand même, Neya.

Quelques-uns ont-il plus d'expérience concernant "border-radius"?
Citation :

Définition de border-radius
La propriété de feuille de style css border-radius permet de d'arrondir les coins d'une bordure.
.identifiant{
  border-radius : 5px;
}


La propriété de feuille de style border-radius css peut pendre les valeurs de :
- numérique suivie de px ou % ou pt ou em.
Si la propriété de feuille de style css border-radius est suivie d'une seule valeur alors cette valeur est appliquée à tous les coins de lélément.
Si la propriété de feuille de style css border-radius est suivie de deux valeurs alors la première valeur est appliquée aux marges intérieures horizontales et la seconde aux marges intérieures verticales.

Application de border-radius
La propriété de feuille de style css border-radius est applicable sur tous les éléments qui ont une bordure.

Définition de -moz-border-radius
La propriété de feuille de style css -moz-border-radius permet d'arrondir les coins d'une bordure.

.identifiant{
  -moz-border-radius : 5px 10px;
}

La propriété de feuille de style -moz-border-radius css peut pendre les valeurs de :
- nombre, suivie de px ou % ou pt ou em. Accepte de une à quatre valeurs à la suite.
- inherit, hérite de son parent.
Si la propriété de feuille de style -moz-border-radius css est suivie deux valeurs alors la première valeur correspond aux coins haut-gauche et bas-droit; la seconde valeur correspond aux coins bas-gauche et haut-droit.

Si la propriété de feuille de style -moz-border-radius css est suivie quatre valeurs alors chaque valeurs correspondent à un coin (haut-gauche, haut-droit, bas-droit, bas gauche).

Application de -moz-border-radius
La propriété de feuille de style css -moz-border-radius est applicable sur toutes les balises HTML ou XHTML ayant une bordure.

Problèmes de -moz-border-radius
La propriété de feuille de style css -moz-border-radius n'est reconnu que par FireFox et Nestcape.

---------------------------------------------------------------------------------

Sinon un topic sur le sujet a déjà été lancé : Border-radius et explorer

Attention aux incompatibilités.

NB : autres liens :
http://www.css3.info/preview/rounded-border/
http://www.esqsoft.com/css-help/border-radius-css-curved-borders.htm
Modifié par neya (13 Feb 2008 - 09:28)
Sujet clos
Aller à