How to get crossing CSS borders


Tags: css,twitter-bootstrap,border,border-layout

Problem :

I am trying to create some styling for my page and I want it to look basically like this:

enter image description here

I am curious if there is any way that I can get the borders to overlap like this. I am using Twitter Bootstrap and my HTML looks like this right now:

<div class="container-fluid">

  <div class="row-fluid">

    <div class="span2">
       <img src="/images/logo.png" alt="logo"><br><br>

       <div class="well sidebar-nav">
        <ul class="nav nav-list">
          <li class="nav-header">Sub-Menu (this will only show for pages that need a sub-menu)</li>
          <li class="active"><a href="#">Current</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </div><!--/.well -->

    </div>

    <div class="span10">
      <h1 style="text-align:center;">Interplanetary Reactions</h1>
      <div class="center-me" style="border-top:5px solid white; border-bottom:5px solid white;">

    </div>

  </div>
<div class="center-me">
      <img src="http://i.imgur.com/yeHzm.jpg" alt="graphic">
</div>
    </div>
  </div>

  <footer style="border-top:5px solid white;">
<br>
<div class="row-fluid">

<div class="span4">
    &copy; Interplanetary Reactions 2012
</div>

<div class="span4">
    <div class="fb-like" data-href="http://www.facebook.com/    InterplanetaryReactions" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true"></div>
</div>

<div class="span4">
    <a href="https://twitter.com/InterReactions" class="twitter-follow-button" data-show-count="false" data-lang="en">Follow @InterReactions</a>
</div>

</div>
  </footer>

</div><!--/.fluid-container-->

I know this isn't super clear but I am hoping someone will have some insight.



Solution :

I suggest putting a border-image around your parent element. The basic approach is to create an image that contains your border in in in 9 slices (each corner, each side, and the middle) and then use CSS3's border-image to add the border to your element. See http://css-tricks.com/understanding-border-image/ for details.


    CSS Howto..

    How to scroll to bottom of div generated by ng-repeat Angular JS using JQuery?

    How can i create a div which contains two divs and stretch automatically

    How to apply bootstrap css to all buttons

    How to remove an element from the flow of HTML/CSS?

    How do I make my mobile website auto-adjust its screen resolution?

    How to make empty div one line height using CSS?

    How to mark search phrase in syntax highlighted markdown code?

    How to center text inside div in this specific situation? [duplicate]

    How can I properly create a contenteditable “Font Tester” type editor with CSS classes applied by JQuery?

    how to create Active State in CSS Navigations

    HTML - How do I insert a tag into each line of a
     block without hard coding?

    How to format date elements (year, month, date) individually with CSS and Rails i18n?

    how to use liveview in dreamweaver cs5 and local xampp server

    With three divs, how to make one float to the right?

    How to add a new CSS class to a Link Badge if the value is 0?

    HTML CSS How to stop a table to put the content after it on a new line?

    How to leave out the last column when calculating the width

    How to float elements in rows.

    How to collapse div same like facebook chat

    How to use CSS to center the buttons?

    How do i move an image from left to right and right to left in javascript for infinite time?

    how to fade-out/blur div's borders with css?

    how to have custom css overrule bootstrap

    How can I use Javascript to allow navigation between sections using keyboard shortcuts?

    How to hide Fileupload with simple span by using css

    CSS How to embed several Font-Weights at once

    How to place elements on top of each other

    How to apply CSS correctly to iFrame?

    How to load CSS into CodeIgniter

    How to build a completely static multipage website with BEM?