CSS Border

The CSS border is a shorthand property used to set the border on an element. This border property is used to specify the style, color and size of the border of an element.


Understanding different border styles

The border-style property sets the style of a box’s border such as: solid, dotted, etc. It is a shorthand property for setting the line style for all four sides of the elements border.

The border-style property can have the following values: none, hidden, solid, dashed, dotted, double, inset, outset, groove, and ridge.

Input:-

Index.html
	
<body>
	  <h1>This is a heading element</h1>     
   <p>This is a paragraph element</p>
</body>

Style.css
	
h1{
  border-style: dotted;
}
p{
  border-style: ridge;
}

Output:-

Note: We must specify a border style in order to make the border appear around an element, because the default border style is none. Whereas, the default border width or thickness is medium, and the default border color is the same as the text color.


Setting the Border Width

The border-width property specifies the width of the border area. It is a shorthand property for setting the thickness of all the four sides of an element’s border at the same time.

The border width can be specified using any length value, such as px, em, rem, etc. In addition to length units, the border width may also be specified using one of three keywords: thin, medium, and thick. Percentage values are not allowed.

Input:-

Index.html
	
<body> 
   <p>This is a paragraph element</p>
</body>

Style.css
	
p{
  border-style: dotted;
  border-width: 10px;
}

Output:-


Specifying the Border Color

This property specifies the color of the border area. This is also a shorthand property for setting the color of all the four sides of an element’s border.

The CSS border-width or border-color property does not work if it is used alone. Use the border-style property to set the style of the border first.

Input:-

Index.html
	
<body> 
   <p>This is a paragraph element</p>
</body>

Style.css
	
p{
  border-style: dotted;
  border-width: 10px;
  border-color: #ff0000;
}

Output:-


The Border Shorthand Property

The border property is a shorthand property for setting one or more of the individual border properties border-width, border-style and border-color in a single rule.

If the value for an individual border property is not specified while setting the border shorthand property, the default value for that property will be used instead, if any.

For example, if the value for the border-color property is missing or not specified when setting the border, the element’s color property will be used as the value for the border color.

Input:-

Index.html
	
<body> 
   <p>This is a paragraph element</p>
</body>

Style.css
	
p{
  border: 5px solid #ff0000;
}

Output:-