Polygon border / border radius of a button

Question

I am trying to make polygon border shape like image below.

The code i have tried is below.

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

.p-button{
  background: transparent;
  text-decoration: none;
  background: #5344c6;
  color: white;
  padding: 15px 50px;
  border-radius: 27px;
  text-transform: uppercase;
  font-family: "Poppins";
  letter-spacing: 0.5px;
}

body{
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  
}

<a class="p-button" href="">Explore The Tech</a>

Baptistery

take a look at bennettfeely.com/clippy it should help you to create your clip-path CSS rule. – Southern

Answer 1

Use clip-path:

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

.p-button{
  background: transparent;
  text-decoration: none;
  background: #5344c6;
  color: white;
  padding: 15px 50px;
  text-transform: uppercase;
  font-family: "Poppins";
  font-size:40px;
  --h:45px; /* this is half the height, adjust it based on your code */
  clip-path:polygon(
    0 50%,
    calc(0.134*var(--h))  25%,   /* 0.134 = 1 - cos(30)   */
    calc(  0.5*var(--h))  6.7%,  /* 6.7% = 0.134/2 * 100% */
    var(--h) 0,
    calc(100% - var(--h)) 0,
    calc(100% - 0.5*var(--h))   6.7%,
    calc(100% - 0.134*var(--h)) 25%,
    100% 50%,
    calc(100% - 0.134*var(--h)) 75%,
    calc(100% - 0.5*var(--h))   93.3%, /* 93.3% = 100% - 6.7% */
    calc(100% - var(--h)) 100%,
    var(--h) 100%,
    calc(  0.5*var(--h))  93.3%,
    calc(0.134*var(--h))  75%);
}

body{
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  
}

<a class="p-button" href="">Explore The Tech</a>

Tinney

I had no idea this can be achieved via clip-path. Thank you, it works. Is there any way to understand what and how the code does achieve it? – Baptistery

@FossBytes your shape is made with 14 points so I simply specified each point inside the clip-path, everything else is math related. I have added details about some specific values. Not sure if you are familiar with Math or not but if you do you can easily understand the logic if you follow the code point by point – Tinney

In case we need a transparent background with an exact polygon border of var(--borderwidth). How can i do that? – Baptistery

@FossBytes you will need a complete different code, the above one will not help you – Tinney