CSS border sides:-
From the examples at the previous pages, you have visible that it's miles viable to specify a exclusive border for every side.
In CSS, there are also properties for specifying every one of the borders (pinnacle, proper, bottom, and left):
<!DOCTYPE html>
<html>
<head>
<style>
p {border-top-style: solid;
border-right-style: dotted;
border-bottom-style: solid;
border-left-style: dotted;
}
</style>
</head>
<body>
<h1> Individual Border Side </h1>
<p> We use 2 different border styles in one. </p>
</body>
</html>
Try this code for a better experience
Now the below example will give the same result as above:
<!DOCTYPE html>
<html>
<head>
<style>
p {border-top-style: solid dotted;
}
</style>
</head>
<body>
<h1> Individual Border Side </h1>
<p> We use 2 different border styles in one. </p>
</body>
</html>
Try this code for a better experience
So, here is the above example work:
If the border-style property has four values:
- border-style: solid dotted dashed double;
- the top border is solid
- the right border is dotted
- the bottom border is dashed
- the left border is double
If the border-style property has three values:
- border-style: solid dotted dashed;
- the top border is solid
- the right and left borders are dotted
- the bottom border is dashed
If the border-style property has two values:
- border-style: solid dotted;
- the top and bottom borders are solid
- the right and left borders are dotted
If the border-style property has one value:
- border-style: solid;
- all the borders are solid
<!DOCTYPE html>
<html>
<head>
<style>
body {text-align: center;}
p. four{border-style: solid dotted dashed double;} /*four border styles*/
p. three{border-style: solid dotted dashed;} /*three border styles*/
p. two{border-style: solid dotted;} /*two border styles*/
p. one{border-style: solid ;} /*one border style*/
</style>
</head>
<body>
<h1> Individual Border Side </h1>
<p class="four"> 4 different border styles. </p>
<p class="three"> 3 different border styles. </p>
<p class="two"> 2 different border styles. </p>
<p class="one"> 1 border style. </p>
</body>
</html>
Try this code for a better experience
NOTE:- We used the border-style property used in the above examples however it is also working with border-width and border-color.
.png)
0 Comments