8.1 Propriété border
Les cadres sont un aspect important du design web. Ils permettent de distinguer les éléments et d'améliorer la perception visuelle de la page. CSS offre de nombreuses propriétés pour créer et styliser des bordures. Examinons les principales propriétés des bordures, y compris l'écriture compacte et complète, ainsi que les propriétés pour définir la largeur, le style, la couleur et les coins arrondis des bordures.
Paramètres principaux
Les principaux paramètres de la bordure peuvent être définis en utilisant des propriétés distinctes: border-width, border-style et border-color.
Syntaxe :
element {
border-width: width;
border-style: style;
border-color: color;
}
Exemple d'utilisation :
.border-full {
border-width: 2px;
border-style: solid;
border-color: red;
}
Écriture compacte
La propriété border permet de définir tous les paramètres principaux de la bordure (largeur, style et couleur) en une seule ligne.
Syntaxe :
element {
border: width style color;
}
.border-compact {
border: 2px solid red;
}
.border-full {
border-width: 2px;
border-style: solid;
border-color: red;
}
<body>
<div class="border-compact">Écriture compacte</div>
<div class="border-full">Écriture complète</div>
</body>
8.2 Largeur de la bordure : border-width
La propriété border-width définit la largeur de la bordure. Les valeurs peuvent être spécifiées en pixels (px),
points (pt), pourcentages (%) ou mots-clés (thin, medium, thick).
Syntaxe :
element {
border-width: width;
}
Exemple :
.border-thin {
border: thin solid black;
}
.border-medium {
border: medium solid black;
}
.border-thick {
border: thick solid black;
}
.border-custom {
border-width: 5px;
border-style: solid;
border-color: black;
}
<body>
<div class="border-thin">Bordure fine</div>
<div class="border-medium">Bordure moyenne</div>
<div class="border-thick">Bordure épaisse</div>
<div class="border-custom">Bordure de 5px de largeur</div>
</body>
8.3 Style de bordure : border-style
Description :
La propriété border-style définit le style de la bordure. Les options de style incluent :
none: pas de borduresolid: ligne continuedotted: ligne pointilléedashed: ligne en tiretsdouble: double lignegroove: bordure en forme de rainureridge: bordure en forme de crêteinset: bordure enfoncéeoutset: bordure saillante
Syntaxe :
element {
border-style: style;
}
Exemple :
.border-none {
border: 2px none black;
}
.border-solid {
border: 2px solid black;
}
.border-dotted {
border: 2px dotted black;
}
.border-dashed {
border: 2px dashed black;
}
.border-double {
border: 4px double black;
}
.border-groove {
border: 4px groove black;
}
.border-ridge {
border: 4px ridge black;
}
.border-inset {
border: 4px inset black;
}
.border-outset {
border: 4px outset black;
}
<body>
<div class="border-none">Sans bordure</div>
<div class="border-solid">Ligne continue</div>
<div class="border-dotted">Ligne pointillée</div>
<div class="border-dashed">Ligne en tirets</div>
<div class="border-double">Double ligne</div>
<div class="border-groove">Rainure</div>
<div class="border-ridge">Crête</div>
<div class="border-inset">Bordure enfoncée</div>
<div class="border-outset">Bordure saillante</div>
</body>
8.4 Couleur de la bordure : border-color
La propriété border-color définit la couleur de la bordure. La couleur peut être spécifiée sous différentes formes : noms de couleurs,
codes hexadécimaux, RGB, RGBA, HSL, HSLA.
Syntaxe :
element {
border-color: color;
}
.border-red {
border: 2px solid red;
}
.border-blue {
border: 2px solid blue;
}
.border-green {
border: 2px solid green;
}
.border-rgba {
border: 2px solid rgba(255, 0, 0, 0.5);
}
<body>
<div class="border-red">Bordure rouge</div>
<div class="border-blue">Bordure bleue</div>
<div class="border-green">Bordure verte</div>
<div class="border-rgba">Bordure rouge semi-transparente</div>
</body>
8.5 Coins arrondis avec border-radius
La propriété border-radius permet d'arrondir les coins des éléments, créant des bordures arrondies. Elle peut
être appliquée à tous les coins en même temps ou à chaque coin individuellement.
Syntaxe :
element {
border-radius: radius;
}
Valeurs :
- Valeur unique: par exemple,
border-radius: 10px;— applique le même rayon d'arrondi à tous les coins - Deux valeurs: par exemple,
border-radius: 10px 20px;— la première valeur s'applique aux coins supérieurs gauche et inférieur droit, la seconde aux coins supérieurs droit et inférieur gauche - Quatre valeurs: par exemple,
border-radius: 10px 20px 30px 40px;— applique des rayons pour le coin supérieur gauche, le coin supérieur droit, le coin inférieur droit et le coin inférieur gauche respectivement - Valeurs mixtes: les rayons peuvent être définis en pourcentages, ce qui permet d'adapter l'arrondi à la taille de l'élément
Exemple :
.radius-all {
border: 2px solid black;
border-radius: 15px;
padding: 10px;
margin: 10px;
}
.radius-top {
border: 2px solid red;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
padding: 10px;
margin: 10px;
}
.radius-bottom {
border: 2px solid blue;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
padding: 10px;
margin: 10px;
}
.radius-mixed {
border: 2px solid green;
border-radius: 10px 20px 30px 40px;
padding: 10px;
margin: 10px;
}
<body>
<div class="radius-all">Arrondi sur tous les coins</div>
<div class="radius-top">Arrondi sur les coins supérieurs</div>
<div class="radius-bottom">Arrondi sur les coins inférieurs</div>
<div class="radius-mixed">Arrondissement mixte des coins</div>
</body>
.radius-all: applique le même rayon d'arrondi (15px) à tous les coins.radius-top: applique un arrondi (20px) uniquement aux coins supérieurs.radius-bottom: applique un arrondi (25px) uniquement aux coins inférieurs.radius-mixed: applique des valeurs de rayon différentes sur chaque coin
GO TO FULL VERSION