CSS - Borders

The border properties in CSS is used to create a border or a line around an HTML element.

We can use the border-style property to apply different styles to the borders.

Using the border-style property in CSS

Example :

<html>
<head>
	<style>
		p {
  			border-style: solid;
  		}
	</style>	
</head>
	
<body>
	<p> 
		This is the first paragraph.
	</p>
</body>
</html>

Output :

So, in the above example, we have used the border-style property in CSS to draw a border across the <p> element.

<style>
	p {
		border-style: solid;
	}
</style>

And if you note, we have set the value of the border-style property as solid. As a result a solid border is drawn across the <p> element.

Similarly, there are other values for border-style property that we have defined below.

border-style	Description
solid	Used to draw a solid border
dotted	Used to draw a dotted border
dashed	Used to draw a dashed border
double	Used to draw a double border
ridge	Used to draw a ridged border with 3D effect
groove	Used to draw a grooved border with 3D effect
inset	Used to draw an inset border with 3D effect
outset	Used to draw an outset border with 3D effect
none	No border is drawn
hidden	Used to draw a hidden border

Using four values for border-style

The border-style property can have four values.

Let us clear it with the below example.

Example :

<html>
<head>
	<style>
		p {
  			border-style: solid dotted dashed double;
  		}
	</style>	
</head>
	
<body>
	<p> 
		This is the first paragraph.
	</p>
</body>
</html>

Output :

So, in the above example the border-style property has four values(i.e. solid, dotted, dashed and double).

<style>
	p {
		border-style: solid dotted dashed double;
	}
</style>

And the border drawn has the top border line as solid, right border line as dotted, bottom border line as dashed and left border line as double.

Now, what if the border-style property had three values.

<style>
	p {
		border-style: solid dotted dashed;
	}
</style>

In that case the top border line is solid, right and left border line is dotted and bottom border line as dashed.

CSS also provides four properties(i.e. border-top-style, border-right-style, border-bottom-style and border-left-style) using which you can have the same border lines styles as we had with the border-style property.

Applying border styles using four properties

Example :

<html>
<head>
	<style>
		p {
  			border-top-style: solid;
  			border-right-style: dotted;
  			border-bottom-style: dashed;
  			border-left-style: double;
  		}
	</style>	
</head>
	
<body>
	<p> 
		This is the first paragraph.
	</p>
</body>
</html>

Output :

Applying Border Color using CSS

The border-color property is used to apply colors to a border.

Example :

<html>
<head>
	<style>
		p {
  			border-style: solid;
  			border-color: red;
  		}
	</style>	
</head>
	
<body>
	<p> 
		This is the first paragraph.
	</p>
</body>
</html>

Output :

So, in the above example, we have drawn a red border across the <p> element using the border-color property.

<style>
	p {
		border-style: solid;
		border-color: red;
	}
</style>

Applying Border Width using CSS

We can use the border-width property to change the width of the border.

Example :

<html>
<head>
	<style>
		p {
  			border-style: solid;
  			border-width: 10px;
  		}
	</style>	
</head>
	
<body>
	<p> 
		This is the first paragraph.
	</p>
</body>
</html>

Output :

So, in the above example, we have used the border-width property to draw a thick border of 10px around the <p> element.

<style>
	p {
		border-style: solid;
		border-width: 10px;
	}
</style>

Now, if we want to set the length and breadth of different width, we can do that as well.

Example :

<html>
<head>
	<style>
		p {
  			border-style: solid;
  			border-width: 10px 2px;
  		}
	</style>	
</head>
	
<body>
	<p> 
		This is the first paragraph.
	</p>
</body>
</html>

Output :

So, we have provided two values for the border-width property. The first value(i.e. 10px) length of the border and the second value(i.e. 2px) is the breadth of the border.

Similarly, if you want all the four lines of the border of different width, you can specify four values for the border-width property.

Example :

<html>
<head>
	<style>
		p {
  			border-style: solid;
  			border-width: 10px 2px 20px 8px;
  		}
	</style>	
</head>
	
<body>
	<p> 
		This is the first paragraph.
	</p>
</body>
</html>

Output :

❮❮ PREV NEXT ❯❯