CSS Border Style [closed] - html

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
How can I make a border style like my added image?
Look at the left bottom border, the border has some gaps.
How can I make that by CSS?
This is the image

Answer 1

Place your border on the main container and then absolutely position the "Anna Jessica" container with a white background to cover the border. Here is a general example based on your image:
h2,
p {
margin: 0px;
}
#test {
border: solid 1px red;
padding: 15px 15px 75px 15px;
position: relative;
}
#bump-out {
display: flex;
position: absolute;
bottom: -38px;
left: 70px;
}
#bump-out-img {
padding: 0px 25px;
background: #FFF;
position: relative;
}
#bump-out-img:before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
top: -10px;
left: 12px;
width: 75px;
height: 75px;
border: solid 1px red;
}
#bump-out-img img {
display: block;
position: relative;
}
#bump-out-title p {
background: #FFF;
padding: 0px 20px 0px 0px;
display: inline-block;
}
<div id="test">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Mauris placerat eleifend leo.</p>
<div id="bump-out">
<div id="bump-out-img">
<img src="http://via.placeholder.com/75x75" />
</div>
<div id="bump-out-title">
<h2>
Some Name
</h2>
<p>
Some Position
</p>
</div>
</div>
</div>