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

Question

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!

Answer 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>

Answer 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.

Answer 3

You can use two div do to it.
first div with border
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>