CSS: Curved corner + extension - html

Question

How can I get the element in the attached pic?
I need a line + curve to right at top + extension.
I can use div's, span or another idea if you have.
I tried to use 2 divs with round borders. But they don't connect in a pretty way in the corner.

Answer 1

I assume you mean the dot in the corner. It's not particularly robust to change, and it will currently only work on a white background. However, with some SCSS and variables, it would be a lot cleaner.
The biggest issue I have with it is that the surrounding box is required to have a relative position, which might affect layout elsewhere.
.fancy {
position: relative;
padding: 12px;
border: 3px solid #ccc;
border-radius: 8px;
}
.fancy::after {
position: absolute;
bottom: -11px;
left: -11px;
content: "";
height: 14px;
width: 14px;
display: inline-block;
border: 4px solid white;
border-radius: 11px;
background-color: gray;
}
p {
font-family: Arial;
font-size: 14px;
}
<p class="fancy">
Some text
</p>
The padding around the dot is given by the border-width (4px).
The colour of the dot is defined by the background-color.
The places where 11px is used are computed by the border-width + the [height (or width) / 2] and used to keep the dot circular and in the corner.
It's a little ambiguous what you want. If you wanted the title block in there too, then add this:
.fancy {
position: relative;
padding: 12px;
border: 3px solid #ccc;
border-radius: 8px;
}
.fancy .title {
display: table;
margin-top: -2.2em;
margin-bottom: 0.2em;
padding: 6px 8px;
border: 6px solid white;
border-radius: 12px;
background-color: #99ccff;
}
p {
font-family: Arial;
font-size: 14px;
}
<p class="fancy">
<span class="title">A fancy title</span>
Some text with a fancy title.
</p>