|
• |
Les bordures : border |
• |
|
Les propriétés CSS de type bordeur permettent de modifier l'affichage des bordures d'un élément : les faire apparaitre ou non de chaque côté de l'élément, changer leur couleur, leur épaisseur...
Nous allons modifier dans les différents exemples l'élément HTML suivant :
HTML
|
|
|
|
<div class="block"></div> |
|
|
|
|
CSS
|
|
|
|
div.block
{
width: 120px;
height: 50px;
background-color: gold;
}
|
|
|
|
|
|
|
border-style
(border-top-style, border-right-style, border-bottom-style, border-left-style)
Cette propriété permet de définir le type de bordure d'un élément. Vous trouverez la liste des valeurs possibles dans la liste suivante :
| Valeur | Description | |
|---|
| none | Pas de bordure | |
| dotted | Pointillés | |
| dashed | Tirets | |
| solid | Ligne simple | |
| double | Ligne double | |
| groove | Bordures 3D canelé (creuses) | |
| ridge | Bordures 3D bombé | |
| inset | Bordures 3D foncée en haut, clair en bas | |
| outset | Bordures 3D clair en haut, foncé en bas | |
|
|
|
|
div.block
{
border-style: ridge;
}
|
|
|
|
|
|
|
|
|
|
|
div.block
{
border-top-style: solid;
border-right-style: dotted;
border-bottom-style: double;
border-left-style: dashed;
}
|
|
|
|
|
=
|
|
|
|
div.block
{
border-style: solid dotted double dashed;
}
|
|
|
|
|
|
|
 |
Cette propriété doit obligatoirement être présente pour faire apparaître une bordure. |
border-color
(border-top-color, border-right-color, border-bottom-color, border-left-color)
Cette propriété permet de modifier la couleur des bordures d'un élément. Elle prend pour valeur un code hexadécimal ou un nom de couleur (voir la liste des couleurs normalisées SVG 1.0)
|
|
|
|
div.block
{
border-style: inset;
border-color: darkred;
}
|
|
|
|
|
|
|
|
|
|
|
div.block
{
border-style: solid;
border-top-color: darkred;
border-right-color: darkviolet;
border-bottom-color: darkblue;
border-left-color: darkgreen;
}
|
|
|
|
|
=
|
|
|
|
div.block
{
border-style: solid;
border-color: darkred darkviolet darkblue darkgreen;
}
|
|
|
|
|
|
|
border-width
(border-top-width, border-right-width, border-bottom-width, border-left-width)
Cette propriété permet de mettre en arrière plan une image de fond. Elle prend pour valeur l'url de l'image.
| Valeur | Description |
|---|
| numérique | en pixels (px) |
| thin | fine |
| medium | moyenne |
| thick | épaissse |
|
|
|
|
div.block
{
border-style: groove;
border-width: medium;
}
|
|
|
|
|
|
|
|
|
|
|
div.block
{
border-style: solid;
border-top-width: 1px;
border-right-width: 2px;
border-bottom-width: 3px;
border-left-width: 4px;
}
|
|
|
|
|
=
|
|
|
|
div.block
{
border-style: groove;
border-width: 1px 2px 3px 4px;
}
|
|
|
|
|
|
|
border
Cette propriété permet de définir en une seule ligne le style des bordures d'un élément, en alignant les valeurs des propriétés dont on a besoin l'une derrière l'autre dans l'odre suivant :
border : border-width border-style(obligatoire) border-color;
|
|
|
|
div.block
{
border: thick outset darkviolet;
}
|
|
|
|
|
=
|
|
|
|
div.block
{
border-width: thick;
border-style: outset;
border-color: darkviolet;
|
|
|
|
|
|
|
