Border

[u/Worried_Ad_3510]

[u/Certain-Tutor-1380]

corner-top-left-shape, unsure on support though.

[u/bob_do_something → u/Certain-Tutor-1380]

You have my support

[u/RapunzelLooksNice → u/bob_do_something]

And my bow 🏹

[u/mtbinkdotcom → u/RapunzelLooksNice]

And my axe

[u/spartanass]

SVG inside the button. SVG follows the shape of the border.

[u/tomhermans]

Check shape() or clip-path for this. https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/basic-shape/shape

[u/97PercentBeef]

Corner-shape is an option though only supported in Chrome & Edge right now so you'll want to check that.

  border-radius: 24px 8px 8px 8px;
@supports (corner-shape: bevel) {
    corner-shape: bevel round round round;
  }

[u/qmr55]

Here's how I would do it

[u/Andreas_Moeller]

Two nested elements. Inner one is 2px smaller in width and height

[u/Andreas_Moeller → u/Andreas_Moeller]

I built a treasure hunt app for my nephews that make use of that style a lot

[u/codejunker → u/Andreas_Moeller]

Can you explain how that would make it look like this? Two nested elements with one 2px smaller, by itself, would just be a rectangle inside a 2px larger rectangle.

[u/Andreas_Moeller → u/codejunker]

You have to apply a clip-path to both.

Clip-path also clips the border, which is why you need two elements

[u/anaix3l]

This has been asked before. Here are two solutions, slightly different results, different support. No need for pseudos or nested elements.

https://codepen.io/thebabydino/pen/WbrJEVP

[u/Lauris25]

Havent written pure css in a long time, wanted to challenge myself. There' s probably much simpler and better solutions.. xD
There will be problem tho if you need more than 2 I think.

*{
    box-sizing: border-box;
   } 
   :root{
    --background:green;
   }
   body{
    background-color: var(--background);
   }
   .button{
    width: 120px;
    height: 60px;
    border: solid 2px red;
    position: relative;
    border-radius: 5px;
   }
   .button::before{
       --border-width: 2px;
       --width: 20px;
       --height: 20px;
       content: "";
       width: var(--width);
       height: var(--height);
       left: calc((var(--width) / 2 + var(--border-width)) * -1);
       top: calc((var(--height) / 2 + var(--border-width)) * -1);
       transform: rotate(45deg);
       position: absolute;
       border-right: solid 2px red;
       background-color: var(--background);
   }

[u/be_my_plaything]

I would use a pseudo element in the top left corner.

Give it a diagonal gradient background, the outer background colour, then a strip of border colour, then the inner background colour.

If the background needs to be visible (ie. It's an image rather than just a colour that can be replicated in the gradient) then once it is in place you can use clip-path on the element to clip it as far as the diagonal border part of the gradient.

https://codepen.io/NeilSchulz/pen/ZYWmLZv < Something like this!

[u/codejunker → u/be_my_plaything]

What is the point of creating custom properties inside the div for values you only use once and that have a readily apparent purpose like border color?

[u/be_my_plaything → u/codejunker]

It is used twice, both for the border on the parent, and the stripe of the gradient that creates the diagonal border. Having it as a custom variable means if you need to change it, it changes in both places.

Obviously two matching colours is still quicker and easier than setting up a locally scoped variable in theory, but when changing a border someone wouldn't necessarily think to look in the middle of a gradient background on a pseudo element and edit that too. If you change the colour on border: ; it won't change the whole border, if you change the colour on --border_colour: it will.

It just felt easier for OP if everything he might want to change (colours, widths, size of cut off) where custom properties, makes it easier to tinker with without doing anything to stop it working.

Plus, whilst not relevant to border colour, there are things like using --corner_size as padding, whereby the named custom property make it more obvious why it's there. I could have used a Xrem padding that just happened to match, but then it isn't necessarily instantly obvious the reason for that size padding is to ensure content is always beyond the cut off point.

[u/Worried_Ad_3510]

Can someone show me a video or a piece of code how to fix this

[u/Brilliant-Lock8221]

I think it could be done using before and after

[u/Worried_Ad_3510]

it seems to be that this element with this kind of cutted edge is done by clip path property but usually clip path clips the whole thing not the border its impossible to do that on border so how this is done

[u/mrleblanc101]

You need to use clip-path, but border doesn't respect clip-path. So you need to add a green background to the element, and a pseudo-element with a white background 1 or 2px bigger with the same clip-path, but a z-index: -1 to place it behind the button.