What is CSS Borders?
The CSS border is a shorthand property used to set the border to an item.
CSS Border Properties
The CSS border properties allow us to specify the style, width, and color of the border of an element. And There are three properties of a border we can change −
- The border-color indicate the color of a border.
- The border-style indicate whether a border should be solid, dashed line, double line, or one of the other possible values.
- The border-width indicate the width of a border.
All CSS Border Properties
| S. No. | Property | Description |
| 1 | border | Sets all the border properties in single statement. |
| 2 | border-bottom | Sets all the bottom border properties in single statement. |
| 3 | border-bottom-color | Sets the color of the bottom border. |
| 4 | border-bottom-style | Sets the style of the bottom border. |
| 5 | border-bottom-width | Sets the width of the bottom border. |
| 6 | border-color | Sets the color of the four borders. |
| 7 | border-left | Sets all the left border properties in single statement. |
| 8 | border-left-color | Sets the color of the left border. |
| 9 | border-left-style | Sets the style of the left border. |
| 10 | border-left-width | Sets the width of the left border. |
| 11 | border-radius | Sets all the four border radius properties for rounded corners. |
| 12 | border-right | Sets all the right border properties in single statement. |
| 13 | border-right-color | Sets the color of the right border. |
| 14 | border-right-style | Sets the style of the right border. |
| 15 | border-right-width | Sets the width of the right border. |
| 16 | border-style | Sets the style of the four borders. |
| 17 | border-top | Sets all the top border properties in single statement. |
| 18 | border-top-color | Sets the color of the top border. |
| 19 | border-top-style | Sets the style of the top border. |
| 20 | border-top-width | Sets the width of the top border. |
| 21 | border-width | Sets the width of the four borders. |
Border Style
The border-style property indicates what type of border to show.
The following values are permitted:
- dotted - Its indicate a dotted border.
- dashed - Its indicate a dashed border.
- double - Its indicate a solid border.
- solid - Its indicate a double border.
- groove - Its indicate a 3D grooved border. The effect depends on the border-color value.
- ridge - Its indicate a 3D ridged border. The effect depends on the border-color value
- inset - Its indicate a 3D inset border. The effect depends on the border-color value
- outset - Its indicate a 3D outset border. The effect depends on the border-color value
- hidden -Its indicate no border.
- none - Its indicate a hidden border.
The border-style property can have one to four values the top border, right border, bottom border, and left border.
Example
Demonstration of the various border styles:
<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>
<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>
</body>
</html>
Output:
The border-style Property
This property specifies what kind of border to display:
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border.
A ridge border.
An inset border.
An outset border.
No border.
A mixed border.
Important Note : None of the other CSS border properties listed below will have any effect unless the border-style property is set!
Border Width
The border-width property indicate the width of the four borders. The width can be set as a particular size (in px, pt, cm, em, etc.) or using one of three predefined values: thin, medium, or thick.
The border-width property can have one to four values the top border, right border, bottom border, and left border.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
p.three {
border-style: dotted;
border-width: 2px;
}
p.four {
border-style: dotted;
border-width: thick;
}
p.five {
border-style: double;
border-width: 15px;
}
p.six {
border-style: double;
border-width: thick;
}
p.seven {
border-style: solid;
border-width: 2px 10px 4px 20px;
}
</style>
</head>
<body>
<h2>The border-width Property</h2>
<p>This property specifies the width of the four borders:</p>
<p class="one">Some text.</p>
<p class="two">Some text.</p>
<p class="three">Some text.</p>
<p class="four">Some text.</p>
<p class="five">Some text.</p>
<p class="six">Some text.</p>
<p class="seven">Some text.</p>
<p><b>Note:</b> The "border-width"
property does not work if it is used alone. Always specify the "border-style" property to set the borders first.</p>
</body>
</html>
Output:
The border-width Property
This property specifies the width of the four borders:
Some text.
Some text.
Some text.
Some text.
Some text.
Some text.
Some text.
Note: The "border-width" property does not work if it is used alone. Always specify the "border-style" property to set the borders first.
Border Color
The border-color property is used to set the four border color.
The color can be defined by:
- NAME - Indicate a color name, like red.
- HEX - Indicate a hex value, like #ff0000.
- RGB - Indicate a RGB value, like rgb(255,0,0).
- TRANSPARENT.
The border-color property can have one to four values the top border, right border, bottom border, and left border.
If border-color is not set, the color of the element is inherited.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: green;
}
p.three
{
border-style: solid;
border-color: red green blue yellow;
}
</style>
</head>
<body>
<h2>The border-color Property</h2>
<p>This property specifies the color of the four borders:</p>
<p class="one">A solid red border</p>
<p class="two">A solid green border</p>
<p class="three">A solid multicolor border</p>
<p><b>Note:</b> The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>
</body>
</html>
Output:
The border-color Property
This property specifies the color of the four borders:
A solid red border
A solid green border
A solid multicolor border
Note: The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.
Border - Individual Sides
From the examples above, you have seen that for each side it is possible to define a different border. In CSS, there are also properties for indicate each of the borders (top, right, bottom, and left):
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
</style>
</head>
<body>
<p>2 different border styles.</p>
</body>
</html>
Output:
2 different border styles.
The above example provides the same outcome as this:
Example:
So here's how it works:
If there are four values for the border-style properties:
border-style: solid dotted dashed double ;
- Top border is solid.
- Right border is dotted.
- Left border is dashed.
- Bottom border is double.
If there are three values in the border-style property:
border-style: solid double dotted;
- Top border is solid.
- Right and left borders are double.
- bottom border is dotted.
If there are two values in the border-style property:
border-style: solid dotted;
- top and bottom borders are solid.
- right and left borders are dotted.
If there is one value in the border-style property:
border-style: dotted;
- all four borders are dotted.
The border-style property is used in the above example. It's also works with border-width and border-color.
Border - Shorthand Property
As you can see from the examples above, when dealing with border, there are many properties to consider. It is also possible to specify all the individual border properties in one property to shorten the code.
The border property is a shorthand property for the following individual border properties:
- border-width
- border-color
- border-style (required)
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 5px solid red;
}
</style>
</head>
<body>
<h2>The border Property</h2>
<p>This property is a shorthand property for border-width, border-style, and border-color.</p>
</body>
</html>
Output:
The border Property
This property is a shorthand property for border-width, border-style, and border-color.
You can also indicate all the individual border properties for one side only:
Left Border
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-left: 6px solid red;
background-color: lightgrey;
}
</style>
</head>
<body>
<h2>The border-left Property</h2>
<p>This property is a shorthand property for border-left-width, border-left-style, and border-left-color.</p>
</body>
</html>
Output:
The border-left Property
This property is a shorthand property for border-left-width, border-left-style, and border-left-color.
Bottom Border
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-bottom: 6px solid red;
background-color: lightgrey;
}
</style>
</head>
<body>
<h2>The border-bottom Property</h2>
<p>This property is a shorthand property for border-bottom-width, border-bottom-style, and border-bottom-color.</p>
</body>
</html>
Output:
The border-bottom Property
This property is a shorthand property for border-bottom-width, border-bottom-style, and border-bottom-color.
Rounded Borders
border-radius property is used to add rounded borders to an element:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
border: 2px solid red;
}
p.round1 {
border: 2px solid red;
border-radius: 5px;
}
p.round2 {
border: 2px solid red;
border-radius: 8px;
}
p.round3 {
border: 2px solid red;
border-radius: 12px;
}
</style>
</head>
<body>
<h2>The border-radius Property</h2>
<p>This property is used to add rounded borders to an element:</p>
<p class="normal">Normal border</p>
<p class="round1">Round border</p>
<p class="round2">Rounder border</p>
<p class="round3">Roundest border</p>
<p><b>Note:</b> The "border-radius" property in IE8 and earlier versions is not supported.</p>
</body>
</html>
Output:
The border-radius Property
This property is used to add rounded borders to an element:
Normal border
Round border
Rounder border
Roundest border
Important Note: The border-radius property in IE8 and earlier versions is not supported.