To set the border on an HTML element, the CSS Border is used. To define the style, color, and size of the border of an HTML element, the CSS border properties are used.
CSS border properties:
- border-style
- border-color
- border-width
- border-radius
CSS border-style:
To define the border type the Border style property is used.
Values used with border-style property to define a border:
| Value | Uses |
| none | Used to not specify any border. |
| dotted | Used to specify a dotted border. |
| dashed | Used to specify a dashed border. |
| solid | Used to specify a solid border. |
| double | Used to specify two borders with the same border-width value. |
| groove | Used to specify a 3d grooved border as per the border-color value. |
| ridge | Used to specify a 3d ridged border as per the border-color value. |
| inset | Used to specify a 3d inset border as per the border-color value. |
| outset | Used to specify a 3d outset border as per the border-color value. |
Example:
<!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 with different values.</h2>
<p class="dotted">Hello World!!</p>
<p class="dashed">Hello World!!</p>
<p class="solid">Hello World!!</p>
<p class="double">Hello World!!</p>
<p class="groove">Hello World!!</p>
<p class="ridge">Hello World!!</p>
<p class="inset">Hello World!!</p>
<p class="outset">Hello World!!</p>
<p class="none">Hello World!!</p>
<p class="hidden">Hello World!!</p>
<p class="mix">Hello World!!</p>
</body>
</html>
Explanation:
In the above example, we are displaying the use of the CSS border-style property with different values.
CSS border-width:
To set the border’s width in pixels the border-width property is used. To set the width of the border, there are three predefined values, thin, medium, or thick.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-width: 10px;
}
p.two {
border-style: solid;
border-width: thick;
}
p.three {
border-style: dotted;
border-width: 5px;
}
p.four {
border-style: dotted;
border-width: thin;
}
p.five {
border-style: double;
border-width: 10px;
}
p.six {
border-style: double;
border-width: medium;
}
p.seven {
border-style: solid;
border-width: 5px 2px 5px 10px;
}
</style>
</head>
<body>
<h2>The border-width Property with different values.</h2>
<p class="one">Hello World!!</p>
<p class="two">Hello World!!</p>
<p class="three">Hello World!!</p>
<p class="four">Hello World!!</p>
<p class="five">Hello World!!</p>
<p class="six">Hello World!!</p>
<p class="seven">Hello World!!</p>
</body>
</html>
Explanation:
In the above example, we are displaying the use of the CSS border-width property with different values.
CSS border-color:
To set the color of the border the CSS border-color property is used.
- Name: It is used to define the color name.
- RGB: It is used to define the RGB value of the color.
- Hex: It is used to define the hex value of the color.
We can also set the border color to “transparent”. The border color is inherited from the color property of an HTML element if it is not set. The border-color property is always used with other border properties.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: dotted;
border-color: red;
}
p.two {
border-style: solid;
border-color: yellow;
}
p.three {
border-style: solid;
border-color: red blue yellow green;
}
</style>
</head>
<body>
<h2>The border-color Property with different values</h2>
<p class="one">Hello World!!</p>
<p class="two">Hello World!!</p>
<p class="three">Hello World!!</p>
</body>
</html>
Explanation:
In the above example, we are displaying the use of the CSS border-color property with different values.
