how i can best build a similiar layout? I looked on jsfiddle and other places but could not find anything similiar to modify.

On top of the normal border there is a "second box" just like in a file storage cupboard. The width of the second box on top should be dynamically set depending on width of the text inside.

Is this approach good? or must i use somehow make a svg file and paint the border of the green circled box in inkscape? this comes to my second question: how do i assign a svg border to html the best way. With border-image?

   .frame{
        border-radius: 3px 0px 3px 3px;
       -moz-border-radius: 3px 0px 3px 3px;
       -webkit-border-radius: 3px 0px 3px 3px;
       box-shadow: 0px 0px 0px 1px rgba(192, 9, 9, 0.7);} 

how it should look like

many thanks in advance

CodePudding user response：

It looks like the second box could be another div that is positioned absolute. It could have borders on the left, top and right side using border-left:, border-right:, etc. The larger box can have a border using border:1px solid black and the second box can sit on top to overlap part of the border to make it look like the design. Using a div element positioned like this instead of an SVG will ensure that it will adjust to the size of its contents.

Something like this: https://jsfiddle.net/v1zcnf0b/18/

For your second question, the border-image property can be used to set an image as a border https://www.w3schools.com/cssref/css3_pr_border-image.asp but for the design that you have shown, I think it would be better to implement with the border and position properties above.

CodePudding user response：

This can be done using two elements that overlap. In this example the .tabrow is positioned relative and has a negative position to the bottom of -1px. It also has a z-index that is higher than the .content.

The border of the .tab has the width of 0 in the bottom and has a white background so that it hides the underlying border of the .content.

.tabrow {
  display: flex;
  justify-content: flex-end;
  position: relative;
  bottom: -1px;
  z-index: 1;
}

.tab {
  padding: .2em;
  border: solid black;
  border-width: 1px 1px 0 1px;
  border-radius: .5em .5em 0 0;
  background-color: white;
}

.content {
  border: thin solid black;
  padding: .2em;
  z-index: 0;
}

<div >
  <div >Title</div>
</div>
<div >
  <p>Text</p>
</div>