CSS Border Property to set Color, Width and Style

The CSS Border is used to define the outline of an html element and can be inherited from the parent container. The css border property is used frequently to set color, style and the width of an html element border.

The border can be set for all the four sides of an element using shorthand property or set individually for each sides as per the need.

Shorthand Property for CSS Border

The border property syntax is,

border: width style color;

1. Width is used to set the thickness of the border.  The width values are,

Width ValueWidth Example
thin
  This is thin border
medium
  This is medium border
thick
  This is thick border
units (like px, em etc)
  This border width is of 10px
inheritBorder width is inherited from the parent container

2. Style is used to set how the border is displayed.  The style values are,

Style ValueStyle Example
noneNo border
hiddenSimilar to no border except in case of border conflict resolution for table elements
dotted
This is dotted border
dashed
  This is dashed border
solid
  This is solid border
double
  This is double border
groove
  This is groove border
ridge
  This is ridge border
inset
  This is inset border
outset
  This is outset border
inheritBorder style is inherited from the parent container

3. Color is used to set the color of a border. The color values are,

Color ValueColor Example
Color Namered, blue, black etc
RGB Valuergb(100,111,80)
Hex Code#66ddde
Examples
border: 1px solid black;

border: 5px double blue;

border: thin dashed rgb(255, 0, 0);

border: 2px dotted green;

border: thick groove #21ABCD;

border: thick ridge #21ABCD;

border: 5px inset #D891EF;

border: 5px outset #D891EF;

border: 3px hidden red;

Set border for each side

The borders can be set individually using,

border-top: width style color;
border-bottom: width style color;
border-left: width style color;
border-right: width style color;

Note: The width, style and color property values will be the same as for “border” property except these properties will be applied only to the corresponding sides of the html element.


CSS also provides user with greater flexibility of setting the border properties individually. In this way we can set only those properties that are required. Let us see one by one.

1. Border Width

The border width is used to set the thickness of the border of an element. Similar to CSS Margin and CSS Padding the borders can be set for all the four sides of an element. The border width can be set in two ways. 1. Using the shorthand property to set width of all the borders in a single line. 2. Set the border width individually for all the four sides of an element.

Shorthand Property for Border Width

The syntax to set the border width of an element in a single line is,

border-width: top-value right-value bottom-value left-value;
Example
border-color: #E03C31;
border-style: dashed;
border-width: 1px thin medium thick;
Border Width Property for each side

The properties to set border width individually for all the four sides are,

border-top-width: value;
border-right-width: value;
border-bottom-width: value;
border-left-width: value;
Example
border-color: #FFA700;
border-style: solid;
border-top-width: thin;
border-right-width: medium;
border-bottom-width: thick;
border-left-width: 10px;

2. Border Style

The border style is used to the set how the border is displayed. The border style can be set in two ways. 1. Using the shorthand property to set the style to all the four sides of an element in a single line. 2. Set the border style for each side individually of an element.

Shorthand Property for Border Style

The syntax to set the border style of an element in a single line is,

border-style: top-value right-value bottom-value left-value;
Border Style Property for each side

The properties to set border style individually for all the four sides are,

border-top-style: value;
border-right-style: value;
border-bottom-style: value;
border-left-style: value;
Example
border-width: medium;
border-color: #03C03C;
border-top-style: solid;
border-right-style: dotted;
border-bottom-style: dashed;
border-left-style: double;

3. Border Color

The border color property is used to set the color of the border of an html element. It can be set in two ways. 1. Using the shorthand property. 2. Set the border colors individually.

Shorthand Property for Border Color

The syntax to set the border color of an element in a single line is,

border-color: top-value right-value bottom-value left-value;
Border Color Property for each side

The properties to set border color individually for all the four sides are,

border-top-color: value;
border-right-color: value;
border-bottom-color: value;
border-left-color: value;
Example
border-width: 2px;
border-style: solid;
border-top-color: red;
border-right-color: green;
border-bottom-color: #6699CC;
border-left-color: #CD7F32

Note: When using shorthand property for border-width, border-style and border-color, they can have 4, 3, 2 or single parameter. The rules for using different number of parameters will be same as css margin and padding properties. It is recommended that you read css margins and css padding articles before reading the css borders to understand it better.

Summary

For your easy reference the css border properties we have discussed so far is summarized below in a table.

Shorthand propertyWidthStyleColor
Border Topborder-top: width style color;border-top-width: value;border-top-style: value;border-top-color: value;
Border Rightborder-right: width style color;border-right-width: value;border-right-style: value;border-right-color: value;
Border Bottomborder-bottom: width style color;border-bottom-width: value;border-bottom-style: value;border-bottom-color: value;
Border Leftborder-left: width style color;border-left-width: value;border-left-style: value;border-left-color: value;

No comments:

Post a Comment