How to make the edge of a button round with clip-path?
.skew{
border: none;
background: none;
outline: none;
color: #fff;
padding: 1rem 1.5rem;
background-color: #ee128f;
clip-path: polygon(0 0, 100% 0%, calc(100% - 22px) 100%, 0% 100%);
margin: 1rem;
border-radius: 5px;
padding-right:3rem ;
/* border-bottom-right-radius: 5px; */
} <button class="skew">text</button>I tried border-bottom-right-radius: 5px; but it is not working well.
If you want all edges rounded, you can play with pseudo elements and transform: skew instead of clip-path.
.skew{
position: relative;
border: none;
background: none;
outline: none;
color: #fff;
padding: 1rem 1.5rem;
background-color: #ee128f;
margin: 1rem;
border-radius: 5px;
padding-right:3rem ;
}
.skew:after {
content: " ";
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
background: #ee128f;
border-radius: 5px;
transform-origin: bottom left;
-ms-transform: skew(-30deg, 0deg);
-webkit-transform: skew(-30deg, 0deg);
transform: skew(-30deg, 0deg);
}<button class="skew">text</button>