La propriété CSS border-radius permet d’arrondir les coins d’une bordure.

p {
border-radius: 10px;
}
    Elle prend comme valeur des nombres en px ou % ou en pt ou en em.

  • S’il y a une valeur, celle-ci correspondra au rayon de l’arrondis pour les quatre angles.
  • S’il y a deux valeurs, la première sera pour les coins hauts gauches et bas droits et la seconde pour les coins hauts droits et bas gauches.
  • S’il y a quatre valeurs, elles correspondent chacune à un coin. Le premier étant le coin haut gauche les autres les coins suivant de le sens des aiguilles d’une montre.
    On peut être plus précis en utilisant les propriétés suivantes qui prennent une valeur :

  • border-bottom-left-radius (bas gauche)
  • border-bottom-right-radius (bas droite)
  • border-top-left-radius (haut gauche)
  • border-top-right-radius (haut droit)

Exemple :

Bien sûr il faut avoir un navigateur qui supporte cette propriété CSS !

<p style="border:1px solid #77ccff; -webkit-border-radius: 5px 10px; -moz-border-radius: 5px 10px;  border-radius: 5px 10px; padding:10px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.
</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.