¿Cómo hacer que el borde de un botón sea redondo con 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> border-bottom-right-radius: 5px; pero no funciona bien.
Si desea redondear todos los bordes, puede jugar con pseudo elementos y transform: skew en lugar de 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>