The CSS border properties are used to modify the appearance of the border of an HTML element.
There are mainly four CSS border properties:
- Border Style – Specify the style of the border.
- Border Width – Specifies the width of the border.
- Border Color – Specifies the color of the border.
- Border Radius – Specifies the radius of the border.
Border Styles
The border style property is used to apply different styles to the border of an HTML element.
| PROPERTY | USE |
| border-style:none | Shows no border. |
| border-style:dotted | Sets dotted border. |
| border-style:dashed | Sets dashed border. |
| border-style:double | Sets a double border. |
| border-style:solid | Sets a solid border. |
| border-style:groove | Sets a grooved border. |
| border-style:hidden | Sets a hidden border. |
| border-style:ridge | Sets a ridged border. |
Syntax
<p style="border-style:dashed">I have a dashed border</p>
My border style is set to none
My border style is set to solid
My border style is set to dotted
My border style is set to dashed
My border style is set to double
My border style is set to ridge
My border style is set to groove
Border Width
The boredr-width property is used to specify the width of the borders. With this property, you can adjust the width of all four borders.
| PROPERTY | USE |
| border-width | Sets equal width for all four borders. |
| border-top-width | Sets width for |
| border-bottom-width | Sets width for the bottom border. |
| border-left-width | Sets width for the left border. |
| border-right-width | Sets width for the right border. |
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Border Properties</title>
</head>
<style>
input
{
border-top-width: 5px;
border-bottom-width: 1px;
border-left-width: 2px;
border-right-width: 4px;
border-style:solid;
}
</style>
<body>
<input type="text" name="myname" placeholder="Check my border">
</body>
</html>Output
To set equal width for all four borders, use border-width property.
<input type="text" style="border-width:5px">
Border color
With this property, you can set color for the borders of an html element.
You can specify color in any of the following methods:
- HEX – Eg:
#FFFFFF - RGB – Eg:
rgb(255, 100, 75) - Name – Eg:
red
Example
<input type="text" style="border-color:green" placeholder="Hey.... I have a colored border.">
| PROPERTY | USE |
| border-top-color | Sets the top border color |
| border-bottom-color | Sets the bottom border color |
| border-left-color | Sets the left border color |
| border-right-color | Sets the right border color |
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Border Properties</title>
</head>
<style>
input
{
border-top-color: red;
border-bottom-color: green;
border-left-color: blue;
border-right-color: tomato;
}
</style>
<body>
<input type="text" name="myname" placeholder="Check my border">
</body>
</html>Output
Border radius
This property is used to set the border-radius of an HTML element. This property also has all the four sub-properties.
| PROPERTY | USE |
| border-top-radius | Sets the top border radius |
| border-bottom- radius | Sets the bottom border radius |
| border-left- radius | Sets the left border radius |
| border-right- radius | Sets the right border radius |
Example
<input type="text" style="border-radius:5px;">
