Unusual border css

Question

How to do border with adaptive height like this?
Can it be pure css?

https://pp.vk.me/c639230/v639230336/9dce/Q28JR-9v-Lc.jpg

Answer 1

I have created a sample code on the following CodePen. http://codepen.io/jaymanpandya/pen/pRXExJ\

HTML

<div class='border'>
  <h1 class='title'>What we do</h1>

  <div class='item-chunk'>
    <p>Image tag comes here</p>
    <h2>Design</h2>
    <p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
  </div>

  <div class='item-chunk'>
    <p>Image tag comes here</p>
    <h2>Development</h2>
    <p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
  </div>
</div>

CSS

body {
  padding:5%;
}

.border {
  width:500px;
  margin:auto;
  border:1px solid #333;
  padding:1% 2%;
}

.title {
  width:250px;
  font-size:24px;
  font-family:Arial;
  background:#fff;
  text-align:center;
  margin:-30px auto auto;
}

.item-chunk {
  text-align:center;
  padding:5% 0;
}

It has a covering div with class name 'border' which has an adaptive height. I have cheated the gap in top border by shifting the h1 tag upwards by negative margin and giving it a white background.

Hope this helps. :)