border-style

Hérité : non   -   Compatibilité : FF, Mozilla, Opera, Safari IE 4,5,6,7 - CSS 1

Cette forme courte de propriété permet d'appliquer à plusieurs côtés d'une bordure le même style ou un style différent. Vous pouvez fournir de une à quatre valeurs de style de bordure séparées par un espace. Le nombre de valeurs spécifiées détermine à quels côtés de la bordure ce style doit être appliqué.

Pour la façon particulière dont Internet Explorer interprête parfois ces propriétés, reportez-vous à la propriété border.

Syntaxe CSS
border-style: Style {1,4}
Valeur(s) possible(s) pour cette propriété :

exemples border-styleLes valeurs de style sont des constantes dont la liste est données ci-contre.

La façon précise dont les navigateurs interprètent les définitions des valeurs de style est loin d'être universelle. Le tableau suivant offre un récapitulatif des styles affichés dans Internet Explorer 6 pour Windows et Explorer 5 pour Macintosh. Les navigateurs plus récent supportent toutes les valeurs, mais ne vous attendez pas à une représentation identique dans tous les navigateurs.

Valeur IE/Windows IE/Mac CSS
dashed 5.5 4 1
dotted 5.5 4 1
double 4 4 1
groove 4 4 1
hidden 7 4 2
inset 4 4 1
none 4 4 1
outset 4 4 1
ridge 4 4 1
solid 4 4 1
Nombre de valeurs Effet
1 La valeur spécifiée est appliquée aux quatre côtés de la bordure.
2 La première valeur spécifiée est appliquée aux côtés supérieur et inférieur, et la seconde valeur aux côtés droit et gauche
3 La première valeur est appliquée au côté supérieur, la seconde aux côtés droit et gauche, et la troisième au côté inférieur
4 Chaque valeur est appliquée, respectivement, au côté supérieur, droit, inférieur et gauche
Valeur initiale

none

Exemple
h1 {border-style: ridge; border-width: 3px}
div {border-style: solid double; border-width: 4px}
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 .borderStyle

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

Epaisseur Style Couleur

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 : Conception de sites Internet et Le design des sites Web


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é.
This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.


Valid HTML 4.01 Transitional

Raccourcis
Contact liens d'évitement et raccourcis clavier Droits de copie Accueil Imprimer
Aller au menu