Bonjour bonjour !

Nous allons apprendre aujourd'hui (ça fait très professeur ça dites donc x)) comment arrondir les angles en toute circonstance.
Si vous ne voyez pas de quoi je parle, regardez les exemples ci-dessous:

Spoiler:

Vous voyez donc que les angles sont arrondis ; je vais donc vous expliquer comment faire. Tout d'abord, je vais vous décevoir, cela ne marche pas sur IE et il n'y aucun moyen pour que cela marche. (actuellement, je vous rassure)

Voici le code :

Citation :

-moz-border-radius: (un nombre de px)px;
-webkit-border-radius: (un nombre de px)px;

En orange : C'est la petite particule pour que cela marche sur Mozilla Firefox. (d'où le moz)
En bleu : C'est la petite particule pour que cela marche sur d'autres navigateurs. (je ne les connais pas tous, donc je ne pourrais pas les citer)
En vert : La "vraie" partie CSS on va dire ; celle qui indique l'arrondi.

Donc si vous voulez que cela marche avec le plus de personnes possible, à chaque fois vous devrez mettre "-moz" et "-webkit".
Mais pour que ça marche, il faut un code correct ^^'
Donc je vais vous montrer un code et son résultat:

Partie CSS:

Code:

.arrondi {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

Partie HTML:

Code:

<span class="arrondi">Test pour mon tutoriel</span>

Résultat:
Test pour mon tutoriel

? Mais on ne voit rien du tout !

Bah oui, puisque vu que nous n'avons pas défini de couleur au fond, c'est le même que celui du forum. Donc cela ne se voit pas

Donc on recommence avec une couleur de fond:

CSS:

Code:

.arrondi {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #000000;
}

HTML:

Code:

<span class="arrondi">Test pour mon tutoriel</span>

Résultat:
Test pour mon tutoriel

? Mais c'est pas joli, le texte est collé au bord et on n'a pas de bordure ...

Patience, patience. Bah voui, c'est ce qu'on va faire maintenant
Donc hop, une petite bordure rouge en tirets avec un écart des lettres par rapport au bord:

CSS:

Code:

.arrondi {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #000000;
border: 2px dashed #FF0000;
padding-left: 5px;
padding-right: 5px;
padding-top: 2px;
padding-bottom: 2px;
}

HTML:

Code:

<span class="arrondi">Test pour mon tutoriel</span>

Résultat:
Test pour mon tutoriel

Bref on s'éloigne on s'éloigne, le but de ce tutoriel n'est pas de vous faire encadrer votre texte mais de maîtriser l'arrondissement des bordures. M'enfin on devait quand même passer par là puisque ça a son effet dessus ^^'

Donc voilà, vous savez tout sur l'arrondissement des bordures (enfin ce que je sais dessus en tout cas).

Je vous rappelle que -moz et -webkit vont par paires, et que cela ne marche malheureusement pas sur IE.

En espérant que ce tutoriel vous ait été utile,
Basil Hawkins.

On peut meme definir plusieur valeur d'angle :

Par exemple :

border-radius : 10px 4px 3px 15px;

Donc 10 en haut a gauche, 4 en haut a droite, 3 en bas a droite et 15 en bas a gauche

Je me permets quelques précisions :

-webkit-, -moz- (et les autres possibles) sont des préfixes qui concernent l'intégration d'une propriété encore non-terminée. Dans le cas de border-radius, la propriété finale est intégrée depuis longtemps et les versions récentes ne prennent plus en compte les propriétés préfixées (Firefox par exemple, ne prend plus en compte -moz-border-radius depuis sa version 14).

Donc, il vaut mieux mettre simplement border-radius. Et dans tous les cas, pour une propriété préfixée encore d'actualité, il faut toujours mettre la propriété finale par la suite.

À noter à propos de border radius qu'on peut également définir l'arrondi d'un angle depuis ses deux côtés de cette manière :

Code:

element { border-radius: 20px/5px }

Citation :

C'est parce que vous utilisez Internet Explorer et les arrondis ne s'affichent pas sous IE.

C'est faux, Internet Explorer accepte la propriété finale border-radius depuis IE9 (deux ans). Il faut bien sûr penser à mettre la propriété finale pour cela, et retirer la balise meta "X-UA compatible" de votre Template overall_header qui force l'affichage d'IE en rendu rétrocompatible IE8 (si besoin, j'expliquerais ça en détails).

Aaaaah ça fait plaisir à entendre

Rien à redire sur les remarques que tu viens de faire qui sont plus que pertinentes.
Le tutoriel date de 2010 et n'a pas encore été repris. Pour information nous remettons l'ensemble des codes et tutoriels du forum au goût du jour depuis cet été, tâche longue et laborieuse qui avance à son rythme. Il va de soi que tes remarques seront prises en compte (et créditées pour le coup) lors de la refonte de ce tutoriel.

En attendant on fait avec mais, encore une fois, merci de ces précisions (notamment le border-radius et ses préfixe contre lesquels je suis parti en croisade depuis le début de l'année de manière résolue ).