Search code examples
cssborderborder-image

create a consistent border with CSS border-image

I am trying to create a border around a square with a corner cut off.

I tried to create this by using border-image but having some struggle with getting a border that has a width of 0.1rem all around. the border of the cut-off corner seems to be a bit smaller than the rest of the borders. Is there a way to create equal width all around the object?

here is the css

.news-card {
    position: relative;
    padding: 1em;
    height:41rem;
    width: 30rem;
    
    clip-path: polygon(100% 0, 100% 85%, 80% 100%, 0 100%, 0 0);

    border-image: fill 0
    conic-gradient(grey 0 0);

    &::before {
        position: absolute;
        z-index: -1;

        content: "";
        inset-block: 0.1rem;
        inset-inline: 0;
        clip-path: polygon(100% 0, 100% 85%, 80% 100%, 0 100%, 0 0);
      
        border-image: fill 0/0.1rem/0.1rem 0
        conic-gradient(white 0 0);
    }
}

here is a link to my code https://codepen.io/Shelas/pen/MWRvNdj

Solution

  • Use one clip-path and you can get the values from my generator: https://css-generators.com/custom-corners/#4

    enter image description here

    .box {
  position: relative;
  height: 300px;
}
.box:before {
  content: "";
  position: absolute;
  inset: 0;
  background: red;
  clip-path: polygon(0 0,100% 0,100% calc(100% - 80px),calc(100% - 80px) 100%,0 100%,0 0,.1rem  .1rem ,.1rem calc(100% - .1rem),calc(100% - 80px - 0.04rem) calc(100% - .1rem),calc(100% - .1rem) calc(100% - 80px - 0.04rem),calc(100% - .1rem) .1rem,.1rem .1rem);
}
    <div class="box"></div>