Different Border style on each side

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

• Mouse Cursor Styles in CSS
• Drop Shadows on Images Using CSS
• Gradient Color as Background
• Matrix() Combining all transformation effects into one.
• Four Colors on Four sides Border
• Transparent Image in CSS
• Add thumbnail border effect using CSS
• CSS Hoverbox Image Effects
• Cross Browser Gradients in CSS3