CSS Débutant .com

Tutoriel css

Compatibilité :

En CSS, certains scripts ne sont pas compatibles avec tous les navigateurs. Voici la liste des navigateurs compatibles :

Créer des coins arrondis sur les blocs

Ce nouveau tutorial vous introduit les coins arrondis full CSS à vos blocs.

A savoir

Ce tutoriel que nous allons étudier ne fonctionnent que sur les navigateurs disposant d'un moteur Gecko (Mozilla, Firefox).

Comme indiqué dans le titre, c'est la propriété CSS -moz-border-radius qui arrondit les coins des blocs (p, div, fieldset...).
-moz-border-radius : 10px;

Cette propriété peut également prendre 4 valeurs pour chaque coin du bloc. Dans l'ordre : top-left, top-right, bottom-right, bottom-right.
-moz-border-radius-topleft : 0; -moz-border-radius-topright : 10px; -moz-border-radius-bottomleft : 0; -moz-border-radius-bottomright : 10px;

Nous appliquons les coins arrondis à une balise de paragraphe unique repérée par un identifiant unique (attribut id) dans le document html.
p { margin : 10px; padding : 10px; background-color : #0f0; } p#coinsArrondis { -moz-border-radius : 0 10px 0 10px; }

Cela donne :

Voici un exemple de paragraphe avec des coins arrondis.