Accueil    CSS    Propriété Border
 



style css border  Style CSS border

«  Partie précédente  |  Index  |  Partie suivante  »


La propriété border décrit les styles applicables aux bordures d'un élément : la couleur la taille l'épaisseur et le style de celles-ci. Il est possible de définir ces styles de façon globale pour les quatre bordures ou de façon spécifique pour chacune des bordures en spécifiant chacune d'elle :
- border-top
- border-left
- border-right
- border-bottom


Les propriétés CSS s'appliquant à la bordure d'un élément sont :
- border-color (border-top-color, border-left-color, border-right-color, border-bottom-color)
- border-radius (border-top-left-radius, border-top-right-radius, border-bottom-right-radius et border-bottom-left-radius)
- border-style (border-top-style, border-left-style, border-right-style, border-bottom-style)
- border-width (border-top-widht, border-left-widht, border-right-widht, border-bottom-widht)
- border-collapse (spécifique à l'élément html <table>)
- border-spacing (spécifique à l'élément html <table>)

L'article relatif au modèle des boites permet de bien comprendre les différentes dispositions s'appliquant autour d'un élément.



Propriétés pour le style border :




Propriété Définition Valeurs CSS
border-color Couleur de la bordure nom couleur
valeur rgb
valeur #hexa
transparent
CSS 1
border-radius Défini la valeur du rayon de l'arrondi des angles d'un élément valeur (px, em ...)
%
CSS 3
border-style Apparence de la bordure dashed
dotted
double
groove
inset
none
outset
ridge
solid
CSS 1
border-width Epaisseur de la bordure valeur (px, em ...)
thin
thick
inherit
medium
CSS 1
border-collapse Spécifique à l'affichage des tableaux : permet de fusionner ou séparer les bordures des cellules collapse
inherit
separate
CSS 1
border-spacing Spécifique à l'affichage des tableaux : indique l'espace entre les bordures des cellules lorsque la propriété border-collapse est positionnée à separate valeur (px, em ...)
inherit
CSS 1


Exemple d'utilisation du style css border :





<div style="padding:5px; width:200px; height:30px; border:solid 1px black;">
   border:solid
</div>

<div style="padding:5px; width:200px; height:30px; border:dashed 1px black;">
   border:dashed
</div>

<div style="padding:5px; width:200px; height:30px; border:dotted 1px black;">
   border:dotted
</div>

<div style="padding:5px; width:200px; height:30px; border:double 4px black;">
   border:double
</div>

<div style="padding:5px; width:200px; height:30px; border:ridge;">
   border:ridge
</div>

<div style="padding:5px; width:200px; height:30px; border-top:ridge;
   border-left:ridge 10px; border-bottom:solid 1px green;
   border-right:ridge 10px green;">
   différentes bordures
</div>



border:solid

border:dashed

border:dotted

border:double

border:ridge

différentes bordures