CODEWITHSUNDEEP
csstailwind-css
ryansle
ryansle

Reputation: 301

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',
}

enter image description here

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.

Upvotes: 0

Views: 1375

Answers (2)

Vivek Tarsariya
Vivek Tarsariya

Reputation: 174

You can also use this if you're using TailwindCSS.

<button type="button" className="m-10 py-2.5 px-7 shadow-[0_0_0_4px_rgba(0,0,0,1)] rounded-full" >Button Test</button>

Result :

Rounded corner button

Upvotes: 1

Aman Chadha
Aman Chadha

Reputation: 2496

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>

Upvotes: 2

Related Questions