Bordures arrondies

Sujet: Bordures arrondies Lun 25 Avr - 5:53

Réaliser des bordures arrondies

Rendu

RENDU
RENDU

Apprenons pas à pas. ♪

Le premier code, le plus long aussi Very Happy

Mettez ce code dans le CSS ou directement dans une balise :

Code:: border-radius-bottomleft:20px;
border-radius-bottomright:20px;
border-radius-topleft:20px;
border-radius-topright:20px;

Quelques explications
bottomleft ▬ correspond à en bas, à gauche
bottomright ▬ correspond à en bas, à droite
topleft ▬ correspond à en haut, à gauche
topright ▬ correspond à en haut, à droite
Au final, c'est de l'anglais hein.

Vous pouvez modifier :
0px (soit le rayon de l'arrondissement) ▬ plus le chiffre est grand, plus ce sera rond (pour mes rendus finaux, j'ai utilisé le nombre 20)

Astuce:

A vous de modifier les valeurs selon ce que vous voulez !

D'autres codes beaucoup plus courts

→ Il existe un autre code pour faire la même chose, qui prend d'ailleurs moins de place. Il suffit juste de remplacer le premier code par celui-ci :

Code:: border-radius: 20px 20px 20px 20px;

Les chiffres sont dans le même ordre que tout a l'heure ; le premier correspond à en bas, à gauche, le second à en bas, à droite, le troisième à en haut, à gauche & le dernier à en haut, à droite.

→ Et puis, si vous souhaitez que les 4 côtés soient arrondis de la même manière, vous pouvez mettre directement ce code (encore moins long xD) :

Code:: border-radius: 20px;

Warning : Compatibilité

/!\ Soyez au courant que les codes donnés précédemment ne sont pas compatibles avec Mozilla Firefox, Linux, les nouvelles versions de IE & Google Chrome.
Si vous souhaitez qu'il marchent sur ces autres navigateurs, il faut placer :

Pour Mozilla Firefox • Ajoutez -moz- au début des codes donnés précédemment

Code:: -moz-border-radius: 20px;

Pour Linux • Ajoutez -khtml- au début des codes donnés précédemment

Code:: -khtml-border-radius:10px

Pour les nouvelles versions de Internet Explorer & Google Chrome • Ajoutez -webkit- au début des codes donnés précédemment

Code:: -webkit-border-radius: 20px;

Et enfin, vous l'aurez compris ; pour que cet effet arrondi marchent sur le plus de navigateurs possibles, il suffit de tous mettre ces trois codes. ^^

Code:: border-radius: 20px;
-khtml-border-radius:10px
-webkit-border-radius: 20px;
-moz-border-radius: 20px;

Sujet: Re: Bordures arrondies Ven 29 Avr - 1:05

Merci Stelyne pour ce tuto !

Sujet: Re: Bordures arrondies Mer 23 Mai - 20:42

merci

maintenant je vois mieux les choses ^^

Sujet: Re: Bordures arrondies