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 :

ValeurDescription
nonePas de bordure
dottedPointillés
dashedTirets
solidLigne simple
doubleLigne double
grooveBordures 3D canelé (creuses)
ridgeBordures 3D bombé
insetBordures 3D foncée en haut, clair en bas
outsetBordures 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.

ValeurDescription
numériqueen pixels (px)
thinfine
mediummoyenne
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;