With the CSS border properties, we can define the different border styling to the HTML elements . Every HTML element represents a rectangular box structure and using the CSS border properties we can specify the border different formatting, colouring and dimensions. CSS properties to style the HTML elements borders.
- border
- border-width
- border-color
- border-style
CSS border
The CSS border property is a shorthand property for border-width, border-style and border color, which means using the border property we can single handily set all these three properties.
Example
<!DOCTYPE html>
<html
<head>
<title></title>
<style type="text/css">
p {
border: 1px red dotted; /* border width = 1px* border-color= red border-style= dotted /
}
</style>
</head>
<body>
<p>This is a Paragraph </p>
</body>
</html>
Border Width
By default, the border width of every element is 0, which makes the border disappear, so its very important to define the border width of the element before defining any other border associated property.
Example
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
p {
border-width: 2px solid; /* border width = 2px solid */
border-style: dotted;
</style>
</head>
<body>
<p>This is a Paragraph </p>
</body>
</html>
Set the border Color
By default, the border colour of every element is black, but due to zero width of default border, we cannot see the border exactly. The border-color property allows us to change the border colour of any HTML element.
Example
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
p {
border: 2px solid; /* border width = 2px solid */
border-color: green; /* setting the green border for paragraph*/
}
</style></head>
<body>
<p>This is a Paragraph </p>
</body>
</html>
Note: By default, the border-width is 0 which mean no border, so when we set border color or styling we need to set some width to the border. The border-color property set similar colour to all side of the element. But using the border-bottom-color, border-top-color, border-left-color, and border-right-color properties we can set different or similar colour for all four sides.
Example
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
p {
border: 2px solid; /* border width = 2px solid *
border-bottom-color: green;
border-top-color:red;
border-left-color: orange;
border-right-color: yellow; }
</style>
</head>
<body>
<p>This is a Paragraph </p>
</body>
</html>
Border Style
The border-style property provides various styling to the element border. Using this property, we can change the default border rendering and make the simple border lines to dotted, dashed, outset, etc.
border-style values
| Values | Description |
| none | No border |
| solid | Single solid line as to represent each side of the border. |
| dotted | Make the borderline dotted. |
| dashed | Dashed lines to represent the border |
| double | Two parallel solid lines to represent the border. |
| groove | Make the border 3D |
| ridge | It also makes a 3D border |
| inset | It makes a box look border. |
| outset | It looks like the element is coming out from a box. |
| hidden | It is similar to the none value, but it is used for table elements. |
border-style property has some subsidiary properties like border-bottom-style, border-top-style, border-left-style, and border-right-style to style different side of same element.
Example
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
p {
border: 2px solid; /* border width = 2px solid */
/*bordar line will be dashed*/
border-style: dashed;}
</style>
</head>
<body>
<p>This is a Paragraph </p>
</body>
</html>
Summary
- The CSS border property is a shorthand for border-width, border-color, and border-style properties.
- By default, the border width of every element is 0.
- The default border colour of every element is black.
- The border-style property defines the various style for borderlines.