'How to create a CSS box on another box's border?

I want to render a box on another box's border, like shown in this image: Expected Output

I tried doing this using flexbox, but couldn't come up with any solution.

How can I approach this design? Any help would be appreciated!

htmlcssflexboxfrontend


Solution 1:[1]

This is a reproduction as close as possible to that picture you showed.

The positioning is obtained using position:relative for the card container and position:absolute for its inner parts.

.card{
  position:relative;
  width: 400px;
  height: 200px;
  border: solid 2px gray;
  border-radius: 15px;
  padding: 5px 5px 5px 5px;
  text-align: center;
  background: linear-gradient(white 50%, #F1FAFF 50%); 
  margin-top: 100px;
}

.inner{
  border: solid 1px lightgray;
  border-top: none;
  height: 80%;
  width: calc(100% - 20px);
  box-shadow: 0px 2px 2px lightgray;
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: white;
}

.label{
  position: absolute; 
  top: -15px;
  left: 25px;
  background: #F5F5F5;
  padding: 5px 10px;
  font-family: sans-serif;
  font-weight: 600;
  border-radius: 5px;
}
<div class="card">
  <div class="label">13 Mar - 12 Apr</div>
  <div class="inner">
  </div>
</div>

Solution 2:[2]

That can be achieved using legend. If you want custom style, then use postiion: relative on parent div (what you call the box with border), use position: absolute on the child div and adjust top, left, margins or translate values.

Solution 3:[3]

You can use two div do to it.

  1. first div with border
  2. second div for shadow box

.outer{
  border:2px solid #333;
  width:200px;
  height:150px;
  border-radius:20px;
}

.inner{
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
width:180px;
height:130px;
margin:10px;
}
<div class="outer">
  <div class="inner">
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Diego De Vita
Solution 2 Han Moe Htet
Solution 3 FeelRightz

Related Questions