How to round out corners when using CSS clip-path

Question

I want to be able to round out the 3 leftmost corners on this shape that I have created, any idea how that can be done?

div {
  position: absolute;
  z-index: 1;
  width: 423px;
  height: 90px;
  background-color: #b0102d;
  color: white;
  right: 0;
  margin-top: 10vw;
  -webkit-clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
  clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
}

<div></div>

Woolf

bennettfeely.com/clippy – Glorify

yeah thats what I used to make the shape but i just don't know how to round the corners. Any ideas? – Woolf

You'd have to go the SVG clip path route I suspect. I don't think polygon supports curves. - sarasoueidan.com/blog/css-svg-clipping – Glorify

hmmm i see. Alright thanks for the link – Woolf

@Glorify is correct. CSS only clip-path supports only basic shapes (like polygon, circle). It does not support a combination of shapes or paths and you would have to use SVG (inline or external) for that. – Tittivate

for later readers, replying to the question in title: notice in Clippy you have the rounded border option in inset(): clip-path: inset(0 0 0 0 round 10%); – Solidago

@Solidago but how can apply it to polygon? – Home

@A.Anvarbekov, unlike inset which includes the option to round, I don't think it's possible to round angles of a polygon inside a clip-path. developer.mozilla.org/en-US/docs/Web/CSS/basic-shape/polygon But I would do it in SVG where you can draw a path with curve linking points, try this excellent tool: yqnn.github.io/svg-path-editor – Solidago

Answer 1

use inset with round property :

inset(0% 45% 0% 45% round 10px)

Allograph

Can you dig this a little dipper? I really don't understand how can I round the corners with inset with this kind of shape – Bound

perfect. elegant. exactly what i was looking for. – Morris

Mehrshad Cheshm Khavari for use of clip-path: w3schools.com/cssref/css3_pr_clip-path.php Yes you can just round a div, but in some cases if you need to use the clip-path: inset that was my solution make the border round – Allograph

Answer 2

An SVG filter can round any kind of clip-path. You simply need to apply it to a parent element. Adjust the stdDeviation to control the radius:

.box {
  width: 423px;
  height: 90px;
  background-color: #b0102d;
  color: white;
  clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
}

.parent {
  filter: url('#goo');
  overflow:hidden;
  position: fixed;
  right:-50px;
  z-index: 1;
  margin-top: 10vw;
}

<div class="parent">
  <div class="box"></div>
</div>

<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
        <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />    
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
</svg>

Related: https://mcmap.net/q/273149/-how-to-make-3-corner-rounded-triangle-in-css

Clearway

This works well for me in Chrome, but not in Firefox. Are there any solutions for this? – Stimulant

nice, what if that shape has different color of border, how can we add border? – Indelible

Answer 3

I've recently found success experimenting with approaches like this...

SVG

<svg width="0" height="0">
  <defs>
    <clipPath id="clipped">
      <circle cx="var(--myRad)" cy="var(--myRad)" r="var(--myRad)"></circle>
      <circle cx="var(--myRad)" cy="calc(var(--myHeight) - var(--myRad))" r="var(--myRad)"></circle>
      <circle cx="calc(var(--myWidth) - var(--myRad))" cy="calc(var(--myHeight) - var(--myRad))" r="var(--myRad)"></circle>
      <circle cx="calc(var(--myWidth) - var(--myRad))" cy="var(--myRad)" r="var(--myRad)"></circle>
      <rect y="var(--myRad)" width="var(--myWidth)" height="calc(var(--myHeight) - (2 * var(--myRad)))"></rect>
      <rect x="var(--myRad)" width="calc(var(--myWidth) - (2 * var(--myRad)))" height="var(--myHeight)"></rect>
    </clipPath>
  </defs>
</svg>

CSS

.clipped {
  --myWidth: 100vw;
  --myHeight: 10rem;
  --myRad: 2rem;
  clip-path: url(#clipped);
}

I found this useful as compared to using border-radius with overflow set to hidden, because this approach doesn't create a BFC or break things like sticky position and css perspective effects. Also, this allows you to "inset" the position of the svg paths to clip inside the element with a "corner-radius" if you want.

Stomatology

Can you post a pen? – Sleepless

@ElvioCavalcante not completely reduced, but try it in a chromium browser, and add prefixed properties for others, you can see how values are derived between this fiddle and my original answers example. jsfiddle.net/y7heo6md/1 – Stomatology

For folks who missed the comment by @Solidago above, my answer here is effectively doing the same thing as using the inset() method with the round option. Like clip-path: inset(0 round 2rem), but keep in mind the round option hasn't always been supported by browsers, so progressively enhance or just use this SVG approach for compat. – Stomatology

So can you not use var/calc for SVG dimensions? The jsfiddle you posted you converted everything to pixels, and I can't get an example to work based on what you posted here. – Crocodile

Answer 4

You can also mess around with the circle to get some different effects.

-webkit-clip-path: circle(60.0% at 50% 10%);
clip-path: circle(50.0% at 50% 50%);

Codepen

Too bad you can't combine the polygon and circle... or maybe you can and I haven't played around with it enough to figure it out. HTH

Oberhausen

Answer 5

clip-path: inset(45% 0% 33% 10% round 10px)

Washington

Answer 6

I don't have a comment option yes, so I'm writing it as an answer..

you need to write as many points as possible to round the corner. Nothig else... for, example a few more points to make lower part bit rounder:

-webkit-clip-path: polygon(100% 0%, 100% 100%, 100% 100%, 25% 100%, 5% 70%,1% 60%, 0% 50%, 25% 0%);

oh, yes, or SVG as comment people here.. :)

Droughty

Answer 7

You could use a child element and do a nested clip-path on that and the child's pseudo element. The parent will do a polygon clip on the shape first, then the pseudo will have an ellipse to round the borders. The clips will have a combined effect.

.parent, .parent div, .parent div:before {
  width: 423px;
  height: 90px;
  position: absolute;
}

.parent {
  right: 0;
  background-image: linear-gradient(to right, transparent 210px, #b0102d 210px);
  margin-top: 15vh;
}

.parent div {
  clip-path: polygon(100% 0%, 100% 100%, 25% 100%, 0 50%, 25% 0);
}

.parent div:before {
  content: "";
  background-color: #b0102d;
  clip-path: ellipse(200px 45px at 210px);
}

<div class="parent">
  <div></div>
</div>

Here is the demo with some adaptations to illustrate what's going on:

.parent, .parent div, .parent div:before {
  width: 423px;
  height: 90px;
  position: absolute;
}

.parent {
  right: 0;
  background-image: linear-gradient(to right, transparent 210px, yellow 210px);
  margin-top: 15vh;
}

.parent div {
  background-color: blue;
  clip-path: polygon(90% 0%, 90% 100%, 25% 100%, 0 50%, 25% 0);
}

.parent div:before {
  content: "";
  background-color: #b0102d;
  clip-path: ellipse(200px 45px at 210px);
}

<div class="parent">
  <div></div>
</div>

The horizontal size and position of the ellipse can be used to get a different effect on the edges. Note that the background starting postion of the parent needs to be adjusted to the same value as the placement of the ellipse (last value in the clip-path) because it fills up whatever gets clipped off on the right side. This can be visualised by removing background-color: blue from .parent div in the second demo.

Here is an additional Codepen to to try it out.

Deathtrap