Propriété: Bordure de Côtés
Chaque côté de la bordure peut être traité séparément avec ces marqueurs.
Usage:
border-top: <border-top-width> || <border-style> || <border-color> ;
border-left: <border-left-width> || <border-style> || <border-color> ;
border-bottom: <border-bottom-width>|| <border-style> || <border-color> ;
border-right: <border-right-width> || <border-style> || <border-color> ;
Définition:
Chaque côté de la bordure peut être traité séparément avec ses marqueurs. Les côtés de bordure se présentent avec les valeurs suivantes.
a)border-top : 5px dotted red - La configuration de la bordure supérieure se fait avec le marqueur bordure-supérieure.Les valeurs prennent la forme largeur, style et couleur de bordure supérieure.
b)border-left : 5pt dashed green - La configuration de bordure gauche se fait avec le marqueur bordure-gauche. Les valeurs prennent la forme largeur, style et couleur de bordure supérieure.
c)border-bottom : 2% groove grey - La configuration de la bordure inférieure se fait avec le marqueur bordure-inférieure. Les valeurs prennent la forme largeur, style et couleur de bordure supérieure.
d)border-right: 5px solid blue - La configuration de la bordure droite se fait avec l’onglet bordure-droite. Les valeurs prennent la forme largeur, style et couleur de bordure supérieure.
Exemple 1:
<div style=" border-top : 2px dotted red ;">
vérification de la propriété des bordures </div>
Résultat:
vérification de la propriété des bordures
Exemple 2:
<div style=" border-left : 2pt dashed green; ">
vérification de la propriété des bordures </div>
Résultat:
vérification de la propriété des bordures
Exemple 3:
<div style=" border-bottom: 5px ridge brown;">
vérification de la propriété des bordures </div>
Résultat:
vérification de la propriété des bordures
Exemple 4:
<div style=" border-right: 5px groove #733366;">
vérification de la propriété des bordures </div>
Résultat:
vérification de la propriété des bordures
En les combinant:
Exemple 5:
<div style="
border-top : 2px dotted red ;
border-left : 2pt dashed rgb(100,100,100);
border-bottom: 5px ridge brown;
border-right: 5px groove #733366;
">
vérification de la propriété des bordures </div>
Résultat:
vérification de la propriété des bordures
REMARQUE: Dans cet exemple, on a utilisé le marqueur div. Mais vous pouvez utiliser n’importe quel marqueur html standard pour configurer le style.
|