Propriétés de frontière de CSS

La largeur, la couleur, et le modèle de la frontière entière ou de chacune de ces propriétés peuvent être placés en utilisant des propriétés de frontière.

Pour définir les frontières autour d'un élément, les propriétés de frontière de CSS

Largeur Proprety de frontière :

Si vous voulez placer chacune des quatre largeurs en même temps, dans le format A B C et D comme décrit ci-dessus, la propriété de frontière-largeur est employée. La valeur peut être mince, moyenne, épaisse, ou une valeur et une unité numériques, telle que 5px ou 0.2em.

Dans chaque paragraphe si vous voulez à une frontière moyenne autour, vous pourriez employer :

Code de CSS

p { border-width: medium; }
/* This sets all to medium */
p { border-width: medium medium; }
/* This sets top/bottom medium then right/left medium */
p { border-width: medium medium medium medium; }
/* Set each A B C and D */

La frontière de défaut n'est aucune frontière du tout, si vous voulez que n'importe quelle frontière apparaisse visuellement, vous devra ajouter une deuxième propriété, frontière-modèle. Les valeurs pour le frontière-modèle sont : aucun, pointillé, à tiret, plein, double, cannelure, arête, encart, début.

Ainsi faisons chaque paragraphe avoir une frontière moyenne qui est pointillée :

Code de CSS

p { border-width: medium; border-style: dotted; }

Variante de police

Ainsi près d'obtenir notre frontière parfaite. Mais ce qui si la frontière à être simple bleu. La propriété de frontière-couleur est placée au bleu

p { border-width: medium; border-style: dotted; border-color: blue; }

Ne ferait-il pas beau d'avoir une propriété de combinaison ? Il y a de lui est frontière juste et elle s'attend la largeur, le modèle, puis à la couleur. Ainsi l'exemple immédiatement ci-dessus a pu être simplifié :

Code de CSS

p { border: medium dotted blue; }

Si vous pouvez placer chacune des quatre frontières individuellement. Les propriétés sont frontière-dessus, frontière-droit, frontière-fond, et frontière-gauches. Les valeurs prévues sont largeur, modèle, colorent alors. Si vous vouliez chaque paragraphe avec une frontière gauche pointillée dans le rouge, et une bonne frontière à tiret dans le pourpre, vous pourriez employer :

Code de CSS

p { border-left: dotted red; border-right: dashed purple; }

La table follwing décrivent les propriétés de frontière :

Property	Description	values
border	A shorthand property for setting all of the properties for the four borders in one declaration	border-width border-style border-color
border-bottom	A shorthand property for setting all of the properties for the bottom border in one declaration	border-bottom-width border-style border-color
border-bottom-color	Sets the color of the bottom border	border-color
border-bottom-style	Sets the style of the bottom border	border-style
border-bottom-width	Sets the width of the bottom border	thin medium thick length
border-color	Sets the color of the four borders, can have from one to four colors	color
border-left	A shorthand property for setting all of the properties for the left border in one declaration	border-left-width border-style border-color
border-left-color	Sets the color of the left border	border-color
border-left-style	Sets the style of the left border/td>	border-style
border-left-width	Sets the width of the left border	thin medium thick length
border-right	A shorthand property for setting all of the properties for the right border in one declaration	order-right-width border-style border-color
border-right-color	Sets the color of the right border	border-color
border-right-style	Sets the style of the right border	border-style
border-right-width	Sets the width of the right border	thin medium thick length
border-style	Sets the style of the four borders, can have from one to four styles	none hidden dotted dashed solid double groove ridge inset outset
border-top	A shorthand property for setting all of the properties for the top border in one declaration	border-top-width border-style border-color
border-top-color	Sets the color of the top border	border-color
border-top-style	Sets the style of the top border	border-style
border-top-width	Sets the witdth of the top border	thin medium thick length
border-width	A shorthand property for setting the width of the four borders in one declaration, can have from one to four values	thin medium thick length