Rounded Edges with Box Shadow – Tailwind CSS

I’m trying to make a slight tweak to my button borders using box shadows but am unsure how.

The following Tailwind.css customization creates the following button border below:

boxShadow: {
  'outline': '3px 3px 0px #777, -3px -3px 0px #777, -3px 3px 0px #777, 3px -3px 0px #777',
}

As you can see, it isn’t quite right on the left and right edges, where there’s a slight curl in which they don’t perfectly align. Does anyone know how to fix this so that it’s perfectly round around the entire border?

Thanks in advance.

>Solution :

use spread parameter of box-shadow property

button
{
background:white;
padding:10px 30px;
border-radius:20px;
border:none;
box-shadow:0 0 0 4px rgba(0,0,0,1);
}

<button>Button Test</button>