Q:

How to use border to get below div design

can you please help to get the below output in div using css. if you can customize more it will be much more help full.

A:

You could do something like this using Flexbox: 

body {
  padding: 5%;
}

.back-div {
  width: 500px;
  height: 200px;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.blue {
  background: blue;
  width: 400px;
  height: 100px;
  margin-bottom: 100px;
  flex-shrink: 0;
  margin-top: -45px;
  text-align: center;
}

.yellow {
  background: yellow;
  width: 400px;
  height: 100px;
  flex-shrink: 0;
  text-align: center;
}
<div class="back-div">
  <div class="blue">
    <h1> Text 1</h1>
  </div>

  <div class="yellow">
    <h1> Text 2</h1>
  </div>
</div>

Fiddle: https://jsfiddle.net/jdzgsxg4/

