there is a problem that I can't solve in css, or rather, I can't solve it easily. I have a design like this and I couldn't figure out how to make the corners. The long and hard way I can mask with svg but this time corners creep when content gets longer.

image

I try thisaI tried saving this shape as svg and masking it to the card but when the size changes, there is creep. And i try clip path but my corners is rounded like that here

CodePudding user response：

You can use a border-image that has the right corner shape. For border-image-slice, you give the relative size of the rounded corners as they are drawn in your image. The parts in the middle will then be stretched as needed.

I've used a SVG image that imitates your example, but you can easily exchange that for your own design. The only thing you need to do is define the color inside the data url. If you want to change it via CSS of the card during run tim, you need to exchange the whole url.

body {
  background: grey;
}
.card {
  border: 20px solid;
  border-image-source: url('data:image/svg xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="white" d="M 60,0 Q 70,0 85,15 T 100,40 L 100,60 Q 100,70 85,85 T 60,100 L 40,100 Q 30,100 15,85 T 0,60 L 0,40 Q 0,30 15,15 T 40,0 Z" /></svg>');
  border-image-slice: 40% fill;
  border-image-width: 2;
  padding: 0 30px;
}

<div >Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

CodePudding user response：

What I think you are looking for is clip path possibly clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);