A border can be a visual separator between the padding on the inside and the margin on the outside.
The width, color, and style of the entire border or each of these properties can be set using border properties.
To define the borders around an element, the CSS border properties
A D V E R T I S E M E N T
Border Width Proprety:
If you want to set all four widths at
the same time, in format A B C and D as pictured above,the
border-width property is used. The value
can be thin, medium, thick, or a numeric
value and unit, such as 5px or 0.2em.
In every paragraph if you want to a medium border around, you could use:
CSS Code
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 */
The default border is no border at all, if you want any border to visually appear, you'll need to add a second property, border-style. The values for border-style are:
none, dotted, dashed, solid, double, groove, ridge, inset, outset.
So let's make each paragraph have a medium border that is dotted:
CSS Code
p { border-width: medium; border-style: dotted; }
Font Variant
So close to getting our border perfect. But what if the border to be blue Simple. The border-color property is set to blue
p { border-width: medium; border-style: dotted; border-color: blue; }
Wouldn't it be nice to have a combination property? There is It's just border and it expects width, style, then color. So the example immediately above could be simplified to:
CSS Code
p { border: medium dotted blue; }
If you can set each of the four borders individually. The properties are border-top, border-right, border-bottom, and border-left. The values expected are width, style, then color. If you wanted every paragraph with a dotted left border in red, and a dashed right border in purple, you could use:
CSS Code
p { border-left: dotted red; border-right: dashed purple; }
The follwing table describe the border Properties:
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
