Question 232685 in CSS Question posted in
Some basic documentation can be found here.

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.

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search