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>

yeah thats what I used to make the shape but i just don't know how to round the corners. Any ideas? — Eduardo Hernandez, Aug 01 '15 at 19:34
You'd have to go the SVG clip path route I suspect. I don't think `polygon` supports curves. - http://sarasoueidan.com/blog/css-svg-clipping/ — Paulie_D, Aug 01 '15 at 19:39
@Paulie_D 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. — Harry, Aug 02 '15 at 05:09
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%);` — antoni, Nov 26 '16 at 14:34
@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. https://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: https://yqnn.github.io/svg-path-editor/ — antoni, Jan 17 '23 at 08:39

score 28 · Answer 1 · answered Apr 08 '21 at 15:25

28

use inset with round property :

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

answered Apr 08 '21 at 15:25

Angelotti

673
1
6
20

score 14 · Answer 2 · answered Dec 30 '20 at 08:30

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://stackoverflow.com/a/65485455/8620333

This works well for me in Chrome, but not in Firefox. Are there any solutions for this? — OttherCreek, Mar 17 '22 at 10:59
nice, what if that shape has different color of border, how can we add border? — Akin Zeman, Mar 27 '23 at 09:48

score 10 · Answer 3 · answered Mar 31 '18 at 12:10

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.

@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. http://jsfiddle.net/y7heo6md/1/ — jonjohnjohnson, Nov 08 '18 at 23:00
For folks who missed the comment by @antoni 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. — jonjohnjohnson, Jun 24 '19 at 07:32
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. — Azmisov, Jan 18 '23 at 01:34

score 9 · Answer 4 · answered Dec 13 '16 at 17:15

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

score 7 · Answer 5 · answered Oct 30 '20 at 06:27

7

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

answered Oct 30 '20 at 06:27

arturmoroz

1,897
1
16
13

score 1 · Answer 6 · answered Aug 01 '15 at 19:48

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.. :)

Shikkediel · Answer 7 · 2019-03-05T03:00:54.530

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.

How to round out corners when using CSS clip-path

7 Answers7

Linked

Related