CSS borders:-
From the CSS border property, you can specify the color, width, and element of the border.
CSS border-style:-
The CSS border-style property specifies what kind of border you want to add.
The border-style properties are given:
- dotted - This property defines the dotted border
- dashed - This property specifies the dashed border
- solid - This property defines the solid border
- double - This property defines the double border
- groove - This property defines the 3D grooved border. This property depends on the border-color value.
- ridge - This property specifies the 3D ridge border. This property depends on the border-color value.
- inset - This property specifies the 3D inset border. This property depends on the border-color value.
- outset - This property specifies the 3D outset border. This property depends on the border-color value.
- none - This property defines no border.
- hidden - This property defines a hidden border.
NOTE:- The border-style property can have 4 values one is for the right border, the second is for the top border, the third is for the left border and the fourth is for the top border.
<!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>
<h1> Border style property </h1>
<p> This property specifies what kind of property you want to use. </p>
<p class="dotted"> This is a dotted border.</p>
<p class="dashed"> This is a dashed border.</p>
<p class="solid"> This is a solid border.</p>
<p class="double"> This is a double border.</p>
<p class="groove"> This is a groove border.</p>
<p class="ridge"> This is a ridge border.</p>
<p class="inset"> This is an inset border.</p>
<p class="outset"> This is an outset border.</p>
<p class="none"> This is a no-border.</p>
<p class="hidden"> This is a hidden border.</p>
<p class="mix"> This is a mixed border. </p>
</body>
</html>
Try this code for a better experience
0 Comments