1. We have moved from vBulletin to XenForo and you are viewing the site in the middle of the move. Though the functional aspect of everything is working fine, we are still working on other changes including the new design on Xenforo.
    Dismiss Notice

How to Have Double Color Border Elements?

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

  1. shabbir

    shabbir Administrator Staff Member

    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

    Nice thinking :)
     
  3. shabbir

    shabbir Administrator Staff Member

    Thanks
     
  4. shabbir

    shabbir Administrator Staff Member

  5. johnny.dacu

    johnny.dacu New Member

    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

    The try is not to make it smaller anyway
     
  7. johnny.dacu

    johnny.dacu New Member

    Then please enlighten me. What was the target then?
     
  8. shabbir

    shabbir Administrator Staff Member

    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

    Still do not understand. What CMS are we talking about?
     
  10. shabbir

    shabbir Administrator Staff Member

    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

    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