Check out this bubbly border! Using Absolute Position to place the three 'circle' divs on the border of a relative postioned parent div.

Taken from Josh W Comeau's amazing course CSS-for-JS developers. Using position: absolute for children elements of a position:relative a nice bubble border effect can be created.

<div className="{box}">
<div className="{`${circle}" ${big}`}></div>
<div className="{`${circle}" ${medium}`}></div>
<div className="{`${circle}" ${small}`}></div>
<p>lorem ipsum...</p>
</div>
.box {
height: 150px;
margin: 64px;
border: 4px solid var(--color-text);
position: relative;
p {
margin-top: 1rem;
margin-left: 1rem;
}
}
.circle {
position: absolute;
border: inherit;
border-radius: 50%;
background-color: var(--color-secondary);
&.big {
width: 50px;
height: 50px;
left: -20px;
top: -30px;
}
&.small {
width: 25px;
height: 25px;
left: 45px;
top: -15px;
}
&.medium {
width: 35px;
height: 35px;
left: -20px;
top: 35px;
}
}