border

Hérité : non - Compatibilité :

IE 4,5,6,7 - CSS 1

Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Cette forme courte de propriété permet de définir, à l'aide d'une seule instruction, la largeur, le style et/ou la couleur des quatre côtés de la bordure d'un élément. Les valeurs qui ne sont pas explicitement définies conservent leur valeur initiale. Si vous ne voulez pas définir quatre côtés identiques, vous disposez de nombreuses autres propriétés permettant de définir individuellement la largeur, le style et la couleur d'un ou de plusieurs côtés.

En complément de cette propriété, vous pouvez également consulter la propriété outline.

Le comportement par défaut des navigateurs en matière de bordures étant différent, chaque règle de style relative à une bordure (border) doit inclure les paramètres de largeur et de style. Si l'un ou l'autre de ces paramètres n'est pas spécifié, la bordure risque de ne pas être visible dans l'un ou l'autre des navigateurs.

Internet explorer 5.+ et 6.+ interprétent différement les propriétés border en fonction du DocType de la page.

bord dans IE 5/6 Si le doctype est :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
alors la bordure est à l'intérieur du bloc. La bordure est donc incluse dans la taille (width) du bloc. Cette interpétation n'est pas conforme aux recommendations du W3C.

bord dans Mozilla Si le doctype est :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> ou toute autre forme valide de doctype XHTML,
alors Internet Explorer va interpréter border comme les autres navigateurs.

Syntaxe CSS

border: largeur || style || couleur

Valeur(s) possible(s) pour cette propriété :

Pour en savoir plus sur les valeurs possibles pour "largeur" et "style", reportez-vous aux propriétés border-width et border-style.

Valeur initiale

Aucun.

Exemple

p {border: 10px groove darkred}

S'applique à

Tous les éléments, mais uniquement les éléments de niveau bloc et éléments remplacés (IMG, INPUT, TEXTAREA, SELECT et OBJECT) dans IE 4 et 5 pour Windows.

Javascript

[window.]document .getElementById("elementID") .style .border = "10px groove darkred";

Testez vous-même la propriété border

Voici le style appliqué à l'élément <p> ci-dessous : border: 10px groove darkred;

Exemple

border-bottom-color, border-top-color, border-left-color, border-right-color (pour définir la couleur d'un seul bord d'un cadre)
border-bottom-style, border-top-style, border-left-style, border-right-style (pour définir le style d'un seul bord d'un cadre)
border-bottom-width, border-top-width, border-left-width, border-right-width (pour définir l'épaisseur d'un seul bord d'un cadre)
border-bottom, border-top, border-left, border-right, (pour définir toutes les caractéristiques d'un seul bord d'un cadre)
border-color (pour définir la couleur d'un cadre)
border-style (pour définir le style d'un cadre)
border-width (pour définir l'épaisseur d'un cadre)
border (pour définir toutes les caractéristiques d'un cadre).
-moz-border-radius, -moz-border-radius-bottomleft, -moz-border-radius-bottomright, -moz-border-radius-topleft, -moz-border-radius-topright (propriétés propres à Mozilla pour définir les formes d'angle d'un cadre).

Ce site vous a plu ? Visitez aussi : et

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.

Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.