CODEWITHSUNDEEP
css
Rahul Desai
Rahul Desai

Reputation: 15501

3 border-bottoms for a single div?

Is there a way to create 3 border-bottoms to a single div?

Here is what it needs to look like:

enter image description here

Upvotes: 1

Views: 47

Answers (4)

Naveen Setty
Naveen Setty

Reputation: 625

you can get this effect using 

border-bottom: 3px double #BBBBBB;"

if you want three lines you need to use three different divs with 

border-bottom: 1px solid #BBBBBB;

fro three containers. for the last div give shadow effect.

Upvotes: 0

Akshay
Akshay

Reputation: 14348

Try this http://codepen.io/anon/pen/ogzoQQ

<div id="box"></div>  

#box{
width:100px;
height:100px;
background:blue;
box-shadow: 0px 3px  green,0px 6px  orange,0px 9px  yellow;
border-radius:5px;
}

Upvotes: 2

Mouser
Mouser

Reputation: 13304

You can try to approach this with border double, border-radius and shadow.

.class {
    border-radius: 5px 5px 5px 5px;
    border-bottom: 3px double #BBBBBB;
    box-shadow: 0px 3px 3px rgba(187,187,187, 1);
}

Upvotes: 0

Tushar
Tushar

Reputation: 4418

This is one method to achieve above output.

HTML

<div class="borderBox">
  <div class="innerCnt">
    <ul>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
    </ul>
  </div>
</div>

CSS

.innerCnt {
  background: #fff;
  position: relative;
  z-index: 1;
  border-radius: 5px;
}
.innerCnt ul {
  margin: 0
}
.borderBox {
  height: 100px;
  border: 1px solid #ccc;
  border-radius: 8px;
  position: relative;
}
.borderBox:after,
.borderBox:before {
  border: 1px solid #ccc;
  content: " ";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 1px;
  border-radius: 8px;
}
.borderBox:after {
  top: 3px;
  border-radius: 7px;
}

Upvotes: 0

Related Questions