A LOGO (image) centered within the top border in CSS (HTML)

Question

I have a <div> with a red border on top and left side. The border-radius is: 16px 4px 10px 4px

But over the top border there is a svg-image (like in this picture). Is there a way to break/stop the red top border in a certain area?

EXAMPLE IMAGE

My possible solutions are not really elegant:

1. I added a background-image
2. I used a <fieldset> instead of a <div>
3. I tried border-image: linear-gradient(to left ,red 25%,transparent 25% 75%,red 0) 1; 3B) I tried border-top-image: ... (but this is no longer supported in CSS)
4. I tried this

But every method is not really simple/clear/elegant

Answer 1

The top border area you want to break should match the proportions of the transparent picture you first make. Then, apply the picture to the top border using the border-image-source property. You can specify which portions of an image should be utilized for the border by setting the border-image-slice property. The border-image-width property should then be adjusted to the original border's width. Like this

div {
  border: 0 solid transparent;
  border-radius: 16px 4px 10px 4px;
  border-top-width: 4px;
  border-left-width: 4px;
  border-image-source: url(transparent-image.png);
  border-image-slice: 4 fill;
  border-image-width: 4px;
}

The 'border-image-slice' property is set to 4 fill, which means that the top and bottom slices of the transparent image will be stretched to fill the border area, and the left and right slices will be repeated. Adjust the values as necessary to achieve the desired effect.