Bonjour bonjour !

Nous allons apprendre aujourd'hui 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.