The CSS Border property allows you to customize the borders around an HTML elements. It is a shorthand property to set individual border property values in a single place. You can set the thickness or width, color and style of each border.

There are mainly three border properties:

  • The border-style :- Specifies whether a border should be solid, dashed line, double line, or one of the other possible values
  • The border-color :- Specifies the color of a border
  • The border-width :- Specifies the width of a border

Apart from the above three one more property is:

  • Border – Shorthand property

 


Border-style:

This border-style property defines the type of border to display. Below given is the syntax for the type of styles that can be used:

Syntax:



border-style: none /* Defines no border */

border-style: solid

border-style: double

border-style: dotted

border-style: dashed

border-style: groove

border-style: inset

border-style: outset

border-style: ridge

border-style: hidden

Below are the different border styles:

border-style

 

Border Style Example:

Following is the example showing some of the above mentioned border styles. We can set different individual border on the four sides of an element.

CSS File: style.css



p.multiple
{
border-top-style: solid;
border-left-style: dotted;
border-bottom-style: dashed;
border-right-style: double;
padding:5px;
width:350px;
}

HTML File: border-style.html



<!DOCTYPE html>
<html>
<head>
<title>CSS Border Style</title>
<!-- Include css file here -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<p class="multiple">
This is the paragraph with multiple border style
</p>
</body>
</html>

 


Border-width:-

The border-width property helps you to set the width of the border. It comes up with a predefined values thin, medium and thick.

You can also set the custom width of borders but in pixels. While setting the border width one thing should kept in mind that this property will not work if used alone, for that we need to set the border first.

The predefined values are :


border-width: thin

border-width: thick

border-width: medium

 

border-width

Border Width Example:

This example will help you how to set the border width.We can set the different border widths on four side of an element.

Note: The border width is 0 or absolute when the border-style is set to be none or absolute.

CSS File: style.css



p.multiple
{
border-style:solid;
border-left-width:10px;
border-top-width:20px;
border-right-width:30px;
border-bottom-width:40px;
width:400px;
}

HTML File: border-width.html



<!DOCTYPE html>
<html>
<head>
<title>CSS border width</title>
<!-- Include css file here -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<p class="multiple">
This is the paragraph with multiple border width
</p>
</body>
</html>

 


Border-color:-

The border-color property is used to give colors to the border. We can set color on the basis of:

  •  name – color name, like “red”
  •  RGB – RGB value, like “rgb(252,217,197)”
  •  Hex – hex value, like “#98bf21”

If no color is specified the border color properties default to the value of the color for the element.

Syntax:



border-color: "name of color";

p.one {
border-style: solid;
border-color: red;
border-width:10px;
}

p.two {
border-style: solid;
border-color: #98bf21;
border-width:10px;
}

p.three {
border-style: solid;
border-color: rgb(252,217,197);
border-width:10px;
}

 

border-color

 

 

Border Color Example:

In this example we have set the border color in different ways as shown:

CSS File: style.css


p {
border-style: solid;
border-width: 20px;
border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: yellow;
padding: 10px; /* Leave a gap between the content and the borders. */
width:100px; /*narrower the box width*/
}

HTML File: border-color.html



<!DOCTYPE html>
<html>
<head>
<title>CSS Border Color</title>
<!-- Include css file here -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<p>
This is the paragraph with different border color.
</p>
</body>
</html>

This is how it will look:

border-color-example

 


Border – Shorthand property:

While dealing with border there are many properties that we have to consider. Some time remembering all and using them becomes a bit lengthy.

To make it short, we can also use border shorthand property. In which all the individual border properties can be specify into one.

One can use it for the following individual properties:

  • border-width
  • border-style
  • border-color

Syntax:-


border: 2px solid red;

Border – Shorthand example:

The given below example will show you how to set this property:

CSS File: style.css


p.one{
border: 2px solid red;
padding:2px;
width:350px;
}

HTML File: border-shorthand.html


<!DOCTYPE html>
<html>
<head>
<title>CSS Border Shorthand Property</title>
<!-- Include css file here -->
<link href='css/style.css' rel='stylesheet' type='text/css'/>
</head>
<body>
<p class="one">
This is the paragraph with border shorthand property
</p>
</body>
</html>

This is how you will see in the live demo.

border-shorthand

 

Conclusion

By using border property you can make your web page and elements more attractive and beautiful.