Go4Expert

Go4Expert (http://www.go4expert.com/)
-   Web Design, HTML And CSS Tutorials (http://www.go4expert.com/articles/web-design/)
-   -   How to Have Double Color Border Elements? (http://www.go4expert.com/articles/double-color-border-elements-t22336/)

shabbir 7Jun2010 16:14

How to Have Double Color Border Elements?
 
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

venami 19Jun2010 10:11

Re: How to Have Double Color Border Elements?
 
Nice thinking :)

shabbir 19Jun2010 13:27

Re: How to Have Double Color Border Elements?
 
Thanks

shabbir 4Jul2010 12:04

Re: How to Have Double Color Border Elements?
 
Nominate this article for Article of the month - Jun 2010

johnny.dacu 6Jul2010 22:12

Re: How to Have Double Color Border Elements?
 
well... i'm not enthusiastic. You still have 2 elements. And the CSS code is bigger. where is the optimization?

shabbir 6Jul2010 22:43

Re: How to Have Double Color Border Elements?
 
Quote:

Originally Posted by johnny.dacu (Post 69971)
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

johnny.dacu 6Jul2010 22:46

Re: How to Have Double Color Border Elements?
 
Then please enlighten me. What was the target then?

shabbir 6Jul2010 23:03

Re: How to Have Double Color Border Elements?
 
Quote:

Originally Posted by johnny.dacu (Post 69973)
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

johnny.dacu 6Jul2010 23:06

Re: How to Have Double Color Border Elements?
 
Still do not understand. What CMS are we talking about?

shabbir 6Jul2010 23:10

Re: How to Have Double Color Border Elements?
 
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.

Full Zip Hoody 30Sep2010 01:29

Re: How to Have Double Color Border Elements?
 
well yeah, it is simpler when you have a div adding the style you will be able to customize it thee way you want.


All times are GMT +5.5. The time now is 10:28.