How to Have Double Color Border Elements?

shabbir's Avatar author of How to Have Double Color Border Elements?
This is an article on How to Have Double Color Border Elements? in Web Design, HTML And CSS Tutorials.
Working for one of my client where he had design for dual color border and the easiest way to get it done was to use 2 elements having border of different color..
HTML Code:
<div style="border:2px solid blue;">
	<div style="border:2px solid Orange;">
		Some Content You want Goes Here
	</div>
</div>
Somehow I did not liked it and so after experimenting a little bit more found that it can be done without 2 bordered elements and so thought would share them with G4Ef members here.

It is simple where you have DIV and one of them is actual border element and second is padding element which looks like border
HTML Code:
<div style="padding:2px;background: Orange;border:2px solid blue;">
	<div style="background:white;">
		Some Content You want Goes Here
	</div>
</div>
Enjoy
0
venami's Avatar, Join Date: Dec 2008
Ambitious contributor
Nice thinking
0
shabbir's Avatar, Join Date: Jul 2004
Go4Expert Founder
Thanks
0
shabbir's Avatar, Join Date: Jul 2004
Go4Expert Founder
Nominate this article for Article of the month - Jun 2010
0
johnny.dacu's Avatar, Join Date: Jul 2010
Contributor
well... i'm not enthusiastic. You still have 2 elements. And the CSS code is bigger. where is the optimization?
0
shabbir's Avatar, Join Date: Jul 2004
Go4Expert Founder
Quote:
Originally Posted by johnny.dacu View Post
well... i'm not enthusiastic. You still have 2 elements. And the CSS code is bigger. where is the optimization?
The try is not to make it smaller anyway
0
johnny.dacu's Avatar, Join Date: Jul 2010
Contributor
Then please enlighten me. What was the target then?
0
shabbir's Avatar, Join Date: Jul 2004
Go4Expert Founder
Quote:
Originally Posted by johnny.dacu View Post
Then please enlighten me. What was the target then?
The main aim of this was that we had less less control over the inner elements in the CMS and can only select few basic elements so had to get it done using the method
0
johnny.dacu's Avatar, Join Date: Jul 2010
Contributor
Still do not understand. What CMS are we talking about?
0
shabbir's Avatar, Join Date: Jul 2004
Go4Expert Founder
The CMS was custom CMS where we could only select bg and color and so having a double border inside a div means that I could apply CSS styles to outer divs but not the inner ones.