Say Goodbye to Border Woes: How to Create Awesome Web Design with Shadows

Do borders on your web elements cause trouble when you hover over them?
Do they shift and move, leaving you frustrated and wondering how to avoid this problem?

bordervsshadow

Well, the solution is here!

In this post, we’ll show you how to use shadows instead of borders to make your web design look stunning without messing up your layout.

How Shadows Can Help?

Shadows are not only useful for creating realistic depth and contrast, but they can also act as borders without taking up any space. This means you can add or remove them without affecting the position or size of your elements.

Customizing Shadows:

When you add a shadow to an element, you have options to customize it.
You can adjust the Boxshadow Color, Shadow Style, Blur Radius, Spread Radius, Horizontal Offset, and Vertical Offset to create distinct kinds of borders with shadows.

Examples:

Here are some examples of how you can use shadows to create different types of borders:





Making Shadows Interactive:

One common use case for interactive borders is to change their appearance when the user hovers over an element. For example, you may want to make the border thicker or change its color when you hover over a button.

shadowpress

How to

Conditions

Animation:
Web capture_30-3-2023_204530_bubble.io


Conclusion:

Using shadows instead of borders can make your web design look awesome without causing any trouble. With some customization, you can create different kinds of borders with shadows, and even make them interactive! So, say goodbye to border woes and try out shadows for your web design today!


Tips Content / Articles

5 Likes

Cool unique approach! Couldn’t you also start with the desired width border that’s transparent or button color matched then change color on hover for same result?

2 Likes

Yes, that’s another trick. :cowboy_hat_face:

Now see what can be done by combining your method and this method

Dubble_Border

2 Likes

Love that!

1 Like

This is a problem if you use fixed width or max width. If you use fit width to content on a group like this, and use padding for the spacing around the elements, and then use margin or space between elements, then you can use border without your content collapsing.

To be precise, what you’re noticing is that borders take up a width on the canvas. They are not positioned absolutely or relative to an element on the page. Using a fixed width, you’re not allowing the element to grow as it needs and so you see content collapsing!

But yes if you really want to use a defined width, this is a solution.

3 Likes

You are indeed correct!

This concept was actually inspired by the IBM Carbon Design System, which utilized this technique to ensure that the distances between elements in their design were consistently up to par with their pixel-perfect standards.

shadowvsborders

Looks like borders can be tricky for all of us - spotted this on dashboard’s Create Template button.

Maybe trying shadows could be a fun experiment. :wink:

1 Like