1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

How to Have Double Color Border Elements?

Discussion in 'Web Design, HTML And CSS' started by shabbir, Jun 7, 2010.

  1. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,283
    Likes Received:
    364
    Trophy Points:
    83
    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:
    <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:
    <div style="padding:2px;background: Orange;border:2px solid blue;">
    	<div style="background:white;">
    		Some Content You want Goes Here
    	</div>
    </div>
    
    Enjoy
     
  2. venami

    venami New Member

    Joined:
    Dec 26, 2008
    Messages:
    195
    Likes Received:
    10
    Trophy Points:
    0
    Occupation:
    Software Professional
    Location:
    India, Tamil Nadu, Cuddalore
    Home Page:
    Nice thinking :)
     
  3. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,283
    Likes Received:
    364
    Trophy Points:
    83
  4. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,283
    Likes Received:
    364
    Trophy Points:
    83
  5. johnny.dacu

    johnny.dacu New Member

    Joined:
    Jul 6, 2010
    Messages:
    88
    Likes Received:
    4
    Trophy Points:
    0
    well... i'm not enthusiastic. You still have 2 elements. And the CSS code is bigger. where is the optimization?
     
  6. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,283
    Likes Received:
    364
    Trophy Points:
    83
    The try is not to make it smaller anyway
     
  7. johnny.dacu

    johnny.dacu New Member

    Joined:
    Jul 6, 2010
    Messages:
    88
    Likes Received:
    4
    Trophy Points:
    0
    Then please enlighten me. What was the target then?
     
  8. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,283
    Likes Received:
    364
    Trophy Points:
    83
    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
     
  9. johnny.dacu

    johnny.dacu New Member

    Joined:
    Jul 6, 2010
    Messages:
    88
    Likes Received:
    4
    Trophy Points:
    0
    Still do not understand. What CMS are we talking about?
     
  10. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,283
    Likes Received:
    364
    Trophy Points:
    83
    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.
     
  11. Full Zip Hoody

    Full Zip Hoody New Member

    Joined:
    Sep 29, 2010
    Messages:
    20
    Likes Received:
    0
    Trophy Points:
    0
    Occupation:
    Programer
    Location:
    US of A
    well yeah, it is simpler when you have a div adding the style you will be able to customize it thee way you want.
     

Share This Page