Médiaforma

Une bordure arrondie

Print Friendly

Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Dans cette rubrique, nous allons voir comment définir une balise <div> à coins arrondis en CSS3. Plutôt que d’écrire le code CSS à la main, nous allons utiliser un générateur en ligne. Nous nous rendons sur la page http://border-radius.com/.

Il suffit d’entrer un rayon de courbure, en pixels, dans les cases qui apparaissent aux quatre angles du rectangle pour que le code CSS soit généré. Ici par exemple, nous choisissons un rayon de courbure général de 30 pixels et un rayon de courbure de 120 pixels pour le coin supérieur droit.

Remarquez qu’il est possible d’alléger le code en décochant une ou plusieurs cases. Mais attention, le code CSS ne fonctionnera plus dans les navigateurs décochés.

Il suffit maintenant de copier-coller le code CSS dans un document.

Voici le résultat de ce code dans Internet Explorer :

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply