New Year, New Skills, New You! - Take Charge of Your Career Now!
They are between the margin and padding in the box model. They are used to put lines around the element and makes the other box model properties easier to see. A border has properties of width, style and color.
Border-Width Property
It defines the width of border. The various border-width property are listed as
•border-width
•border-top-width
•border-right-width
•border-bottom-width
•border-left-width
All of these properties are assigned values in absolute units of length or in percentage. They do not take percentage values. The ‘border-width’ property is a shorthand property for all of the four remaining margin properties. The four remaining properties define specific border-width as per their name as
|
Property |
Margin Side |
|
border-top-width |
Top |
|
border-right-width |
Right |
|
border-bottom-width |
Bottom |
|
border-left-width |
Left |
These properties are used as
.top { border-top-width: 1px; border-right-width: 2px; border-bottom-width: 3px;
border-left-width: 4px; border-style: solid; }
border-left-width: 4px; border-style: solid; }
All the border-width properties can take either values in length or following keywords
- thin
- medium
- thick
Mostly border-width is given a length value in pixels. Four-value , Three-value, two-value, and one-value shorthand syntax is also applicable for border-width and the shorthand property of border-width property is given as
border-width: 1px 3px 5px 7px;
Border-Style
It specify the style of border to be used. The default style is ‘none’ and style of border for each side can be specified. The various border-style property are listed as
- border-style
- border-top-style
- border-right-style
- border-bottom-style
- border-left-style
This property takes keywords as value which are
- none
- hidden
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
It is used as
.top {
border-width: 3px;
border-top-style: ridge;
border-right-style: dashed; border-bottom-style: dotted; border-left-style: double;
}
border-width: 3px;
border-top-style: ridge;
border-right-style: dashed; border-bottom-style: dotted; border-left-style: double;
}
The border-style property has a shorthand property, which combines all the individual top, right, bottom and left properties as shown
border-style: ridge dashed dotted double;
Similar to other four-value properties, border-style shorthand is given as top, right, bottom and left. It also supports the three-value, two-value, and one-value shorthand syntax as others.
Border-Color
It gives the border color for each side of the box. The default color is ‘transparent’ and color of border for each side can be specified. The various border-color property are listed as
- border-color
- border-top-color
- border-right-color
- border-bottom-color
- border-left-color
This property takes ‘transparent’ keyword and various color values as value. Different color values accepted by this property are
- color keyword
- hexadecimal value
- short hexadecimal value
- RGB value
- any color value accepted by the color property
If border-color property is not given, the border-color takes the color as given for color property of text color.
body { border-top-color: red; border-right-color: blue;
border-bottom-color: green; border-left-color: purple; }
border-bottom-color: green; border-left-color: purple; }
Border Shorthand Properties
Each side of the box combine the border-width , border-style , and border-color properties into single property for each side by using the border properties which consist of
- border
- border-top
- border-right
- border-bottom
- border-left
The property takes all of the three border properties of width, style and color as value and one to three values are given to refer to border-width value, a border-style value and a border-color value. as
.top {
border: 3px dashed red; }
border: 3px dashed red; }
The border property is only used to specify styling for all four sides else individual shorthand properties should be used.
border-top: 1px solid #666; border-bottom: 3px dashed red;
