Different Border style on each side

CSS allow us to place four style on four sides of the border around any element just like the colors.

In our previous post we have learned how to apply four colors of border in four sides using CSS. Now we will leap to next step and place four styles on four sides of the border.

1
2
3
4
5
.oneborder {
      border-style:double;
}

Defining one style will put one style of border on four sides.

1
2
3
4
5
.twoborder {
      border-style:double solid;
}

Now we have defined two styles, which will place opposing lines in the same style.

1
2
3
4
5
.threeborder {
      border-style:double solid dashed;
}

Defining three styles as argument will work in clock-wise rotation and will place first style on top second on right and third style on the bottom of border and it will take fourth style from the opposing line which is right, so right and left will have same style.

1
2
3
4
5
.fourborder {
      border-style:double solid dashed groove;
}

In Clock-wise direction all four sides will have different border style as in following example.

Preview

One style Border

Two style Border

Three style Border
line two

Four style Border
line two

Final Code (CSS)

1
2
3
4
5
6
7
8
9
10
11
<style type="text/css">
.oneborder {border-style:double;}
.twoborder {border-style:double solid;}
.threeborder {border-style:double solid dashed;}
.fourborder {border-style:double solid groove dashed ;}
</style>

Final Code (HTML)

1
2
3
4
5
6
7
8
9
10
11
<p class="oneborder">One style Border</p>
<p class="twoborder">Two style Border</p>
<p class="threeborder">Three style Border<br />
line two</p>
<p class="fourborder">Four style Border<br />
line two</p>


Related posts

Tags: , , , , , , , ,

No Response

Post your response

Copyright © 2010 - 2014 Handy CSS Designed By Anotix, Powered By WordPress, all right reserved.