Sommaire

Les Affichage:coins arrondiscoins arrondis des Boîte:coins arrondisboîtes

La Affichage:border-radiuspropriété border-radius permet d’appliquer des coins arrondis de plusieurs types différents aux boîtes. Cette propriété fait partie du module Backgrounds and Borders Module Level 3 qui est en Candidate Recommendation au 17 octobre 2017 : https://www.w3.org/TR/css-backgrounds-3/

La propriété border-radius est la syntaxe raccourcie des quatre propriétés individuelles qui permettent d’appliquer des arrondis spécifiques aux quatre coins d’une boîte : border-top-left-radius, border-top-right-radius, border-bottom-right-radius et border-bottom-left-radius.

Le rayon de l’arrondi de chaque coin s’exprime avec une valeur numérique. Si vous ne spécifiez qu’une seule valeur, elle s’applique à tous les coins. Si vous indiquez deux valeurs, elles s’appliquent aux coins en haut à gauche et en bas à droite ; et en haut à droite et en bas à gauche.

Voici des exemples simples :

<!doctype html> 
<html lang="fr"> 
<head> 
   <meta charset="UTF-8"> 
   <title>Titre de la page</title> 
   <style> 
       p { 
           width: 600px ; 
           padding: 20px ; 
  ...