Search code examples
htmlcssbordercss-shapes

How can I make a cut corner with border-radius?

I already have one solution which going like this one below. But at Safari it looks like there is no margin-right: -5px;. Are there another ways to done this task or fixes for already existing solution.

HTML

<div class="card">
   Title text
</div>

CSS

.card {
    width: 243px;
    height: 400px;

    display: flex;
    flex-direction: column;
    background-color: gray;
    border: 1px solid black;
    border-radius: 8px 0px 8px 8px;
}

&::before {
    border-right: 1px solid black;
    width: 30px;
    height: 55px;
    margin-top: -22px;
    margin-right: -5px;
    content: '';
    position: absolute;
    align-self: flex-end;
    transform: rotate(130deg);
    background: gray;
}

The expected result looks like this expected_result

Solution

  • clip-path combined with a gradient can do it:

    .box {
  --b: 5px; /* border */
  --s: 50px; /* size of the cut */
  --c: red;
  
  width: 300px;
  height: 200px;
  
  border: var(--b) solid var(--c);
  border-radius: 20px;
  clip-path: polygon(0 0,calc(100% - var(--s)) 0,100% var(--s),100% 100%,0 100%);
  background: linear-gradient(-135deg,var(--c) calc(0.707*var(--s) + var(--b)),#0000 0) border-box;
  background-color: grey;
  
}
    <div class="box"></div>