How to make rounded corners when using css clip path polygon

In this article explain how to make rounded corners are in the polygon edges when using css clip path polygon property values. There are many ways to create clip path polygon with rounded corners using svg and css. In this article briefly explain css clip path polygon with rounded corners it also responsive.

Here responsive means just not working aspect ratio based rather than which part of the area rellay we need to extend when content increase. Aspect ratio means is a combination width and height. Either if width or height increase it affect other value.

For example we try to increase the css clip path polygon shape height when tablet view responsive it also increase width of the clip path polygon shape automatically. We forcefully try to control the width is looking like stretched edges or corners. Check the below example,

So we want elegant css clip path polygon with responsive try the following concepts,

1. Using svg filter concept or
2. Convert svg path to clip path.

1. Using svg filter

This is simple method but limited features. In this method first we need to create the polygon shape using css clip path polygon like below,

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

.box
{
    width: 322px;
    background-color: #faebd7;
    height: 229px;
    clip-path: polygon(100% 100%,0% 100%,0% 92px,100% 0%);
    margin: 0 auto;
}

Above polygon shape was created using css clip path polygon property values are used combination of percentage and pixel values, becuase the clip path shape must be perfom responsively when shape was extend. If you want to check the responsive just drag two slanted lines placed bottom of the polygon right hand side.

Now our polygon shape has sharp edges. But we want a rounded and smooth corners. So, need some changes in our code.

<div class="box_parent">
    <div class="box2"></div>

    <svg class="flt_svg" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <filter id="flt_tag">
                <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="flt_tag" />
                <feComposite in="SourceGraphic" in2="flt_tag" operator="atop"/>
            </filter>
        </defs>
    </svg>

</div>

.box2
{
    width: 322px;
    background-color: #faebd7;
    height: 229px;
    clip-path: polygon(100% 100%,0% 100%,0% 92px,100% 0%);
    margin: 0 auto;
}

.flt_svg {
    visibility: hidden; 
    position: absolute;
    width: 0px;
    height: 0px;
}

.box_parent
{
    filter: url('#flt_tag');
}

The polygon edges has approximately 16px same radius smoothness. The corner radius value working on approximately double of the stdDeviation attribute value. If you want to change corner radius 16px to 12px then change stdDeviation="8" to stdDeviation="6" in feGaussianBlur tag attribute in our filter svg tag.

2. Convert svg path to clip path

Nowadays designers and people like more attractive polygon shape with different corner radius in each edges. If we want different corner radius in each edges when using css clip path polygon with svg filter concept not enough to complete that.

Above example the polygon shape each edge has different corner radius. But how to achieve this?

In this method we need a svg file you can export from any vector supported softwares like adobe illustrator, figma and so on.

Above svg exported from figma. We don't use svg directly into our html code rather than we are convert svg to css clip path.

Now we need a clip path converter can convert svg to css clip path polygon with responsive.

plantcss converter provide a advance features of you can work on portion wise responsive. It means which portions are move or not when content increase if clip path elements contain contents of text,image and so on.

More about to know convert svg path th css clip path visit this page svg-to-css-clip-path

<div class="box3"></div>

.box3
{
    width: 322px;
    background-color: #C69C6D;
    height: 229px;
    clip-path: polygon(calc(100% - 28.5px) calc(100% - 0.90000000000001px), 32.2px calc(100% - 0.90000000000001px), 32.2px calc(100% - 0.90000000000001px), 26.973px calc(100% - 1.321px), 22.016px calc(100% - 2.54px), 17.395px calc(100% - 4.491px), 13.176px calc(100% - 7.108px), 9.425px calc(100% - 10.325px), 6.208px calc(100% - 14.076px), 3.591px calc(100% - 18.295px), 1.64px calc(100% - 22.916px), 0.421px calc(100% - 27.873px), 5.3248111102418E-31px calc(100% - 33.1px), 0px 87.4px, 0px 87.4px, 0.1942px 84.5609px, 0.7616px 81.8232px, 1.6794px 79.2163px, 2.9248px 76.7696px, 4.475px 74.5125px, 6.3072px 72.4744px, 8.3986px 70.6847px, 10.7264px 69.1728px, 13.2678px 67.9681px, 16px 67.1px, calc(100% - 30.8px) 0.700002px, calc(100% - 30.8px) 0.700002px, calc(100% - 26.1225px) 0.019601458px, calc(100% - 21.568px) 0.212801024px, calc(100% - 17.2235px) 1.211200686px, calc(100% - 13.176px) 2.946400432px, calc(100% - 9.5125px) 5.35000025px, calc(100% - 6.3200000000001px) 8.353600128px, calc(100% - 3.6855px) 11.888800054px, calc(100% - 1.696px) 15.887200016px, calc(100% - 0.43850000000003px) 20.280400002px, calc(100% - 5.6843418860808E-14px) 25px, calc(100% - 0px) calc(100% - 29.4px), calc(100% - 0px) calc(100% - 29.4px), calc(100% - 0.37139999999999px) calc(100% - 24.7869px), calc(100% - 1.4471999999999px) calc(100% - 20.4072px), calc(100% - 3.1698px) calc(100% - 16.3203px), calc(100% - 5.4816px) calc(100% - 12.5856px), calc(100% - 8.325px) calc(100% - 9.2625px), calc(100% - 11.6424px) calc(100% - 6.4104px), calc(100% - 15.3762px) calc(100% - 4.0887px), calc(100% - 19.4688px) calc(100% - 2.3568px), calc(100% - 23.8626px) calc(100% - 1.2741px), calc(100% - 28.5px) calc(100% - 0.90000000000001px));
    margin: 0 auto;
}

Above example of clip path polygon get it from plantcss converter and watch the below video that shapes are created using css clip path polygon with border concept.