Four Colors on Four sides Border
We can choose color for each side of the border to make it look better and customize it as we want in CSS3.
You may have seen some where that border around any element has different color on each side. If no then scroll down to see it and if yes you have seen some where then just lets begin with it.
1 2 3 4 5 6 7
.onecolor {
border-style:solid;
border-color:#00ff00;
}
if we define only single color as border-color it will color all four sides with the single color.
1 2 3 4 5 6 7
.twocolor {
border-style:solid;
border-color:#00ff00 #ff0000;
}
Defining two color will result in two color borders in which opposing lines will have same color.
1 2 3 4 5 6 7
.threecolor {
border-style:solid;
border-color:#00ff00 #ff0000 #ffff00;
}
Here is little tricky part, defining three colors will color three sides and pick the color for last side from the opposing line. SO right and left side of the border will have same color which we defined in middle of the other two.
1 2 3 4 5 6 7
.fourcolor {
border-style:solid;
border-color:#00ff00 #ff0000 #ffff00 #0000ff;
}
Now as other pattern where we argue about four sides, border have the same clock-wise pattern for defining the color for each side.
Example:
One Color Border
Two Color Border
Three Color Border
Four Color Border
Final Code (CSS):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
<style>
.onecolor {
border-style:solid;
border-color:#00ff00;
}
.twocolor {
border-style:solid;
border-color:#00ff00 #ff0000;
}
.threecolor {
border-style:solid;
border-color:#00ff00 #ff0000 #ffff00;
}
.fourcolor {
border-style:solid;
border-color:#00ff00 #ff0000 #ffff00 #0000ff;
}
</style>
Final Code (HTML):
1 2 3 4 5 6 7
<p class="onecolor">One Color Border</p>
<p class="twocolor">Two Color Border</p>
<p class="threecolor">Three Color Border</p>
<p class="fourcolor">Four Color Border</p>
Related posts
- Drop Shadows on Images Using CSS
- Cool CSS button
- CSS Hoverbox Image Effects
- Transparent Image in CSS
- CSS button effect on link
- Cross Browser Gradients in CSS3
- Add thumbnail border effect using CSS
- Mouse Cursor Styles in CSS
- Gradient Color as Background
- Different Border style on each side
Tags: border, border on each side, color, four, four borders, multiple borders
No Response
Post your response