--- title: "Wrap your elements with box-shadow instead of border" url: "https://www.bekk.christmas/post/2023/05/with-box-shadow-instead-of-border" authors: ["Marcus Haaland"] published: "2023-12-05" updated: "2024-11-07T13:05:28Z" language: "en-US" type: "article" tags: ["Utvikling", "CSS", "Design"] --- # Wrap your elements with box-shadow instead of border Christmas is at the door, but not only presents are being wrapped. For years your tool of choice for wrapping _elements_ has been border. But what if I told you there exists an even more flexible and layout friendly property than this? In this guide we will explore how box-shadow can be used as an alternative to traditional borders, and how it can solve our layout problems. ## In short Border-based wrappers can cause layout shift when their size changes, especially on hover or focus. Box-shadow can act as a border without affecting element size, making it a flexible alternative for dynamic outlines, with the option to use inner or outer shadows and combine them with border when needed. - **For:** Frontend developers working with CSS - **Good to know beforehand:** Basic CSS and box model knowledge _AI-generated_ ## Wrapping with border First, lets have a look at wrapping elements with the `border` property. Have a look beneath the tree: ![A button with a border is beneath a Christmas tree](https://cdn.sanity.io/images/ah2n1vfr/bekk-blogg-prod/c7e5ae5f449735d3124996171b24626069c223fa-488x694.png) _A button with a border is beneath a Christmas tree_ Here's a challenge for you, so don't scroll further down too fast. Take a look at the following code. What do you think happens if you hover the button? ``` button { background-color: red; color: white; padding: 1rem; border: 4px solid green; } button.border:hover { border-width: 16px; } ``` Here's the result: ![Hovering the button leads to layout shift](https://cdn.sanity.io/images/ah2n1vfr/bekk-blogg-prod/88cf4163390c1371daca95158837bbd55e4bddae-1152x648.gif) _Hovering the button leads to layout shift_ Not surprising, the border of course got bigger. But it also caused a layout shift. When the border gets bigger, also the button gets bigger, and pushes elements around. This is often an unwanted effect. If you have a button in a form, you don't want the rest of the elements getting pushed when focusing a button. I will first reveal some ways around this with `border`, and then suggest another solution using `box-shadow`. ## Avoid layout shift using fixed height and width The cause of the layout shift is that the `border` is a part of the element's actual size. So if an element is bigger, logically it will also move other elements around. In form elements, including button, border and padding is baked into the element's size. This is through the CSS-declaration [box-sizing: border-box](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing). This makes it much simpler to control the size of an element, and it also something we can exploit to avoid layout shifts with border. One solution is to define a big enough height and width, so the increased border size does not exceed the size it already has: ``` button { background-color: red; color: white; padding: 1rem; border: 4px solid green; width: 140px; height: 100px; } button.border:hover { border-width: 16px; } ``` If the included `border-width` is not greater than the height and width that have been set, it will not lead to a layout shift: ![Hovering in a button with a large enough set size does not lead to a layout shift](https://cdn.sanity.io/images/ah2n1vfr/bekk-blogg-prod/66eb38bbebd214097e4adc671d7d53f516e00647-1152x648.gif) _Hovering in a button with a large enough set size does not lead to a layout shift_ ## Avoid layout shift by calculating the padding Another solution to avoid layout shift is to calculate `padding` with regard to `border-width`. As the `border-width` increases, we also decrease the `padding`, so the button's size remains the same: ``` button { --border-width: 4px; background-color: red; color: white; padding: calc(1rem - var(--border-width)); border: var(--border-width) solid green; } button.border:hover { --border-width: 16px; } button.with-transition { transition: padding 0.3s ease, border 0.3s ease; } ``` The result looks like this, here a button with and without transition: ![Calculation of padding leads to layout shift for transition](https://cdn.sanity.io/images/ah2n1vfr/bekk-blogg-prod/507e0aaaf6fcba7620e17810167a64ee0d68100d-1152x648.gif) _Calculation of padding leads to layout shift for transition_ As you can see, it seems to work fine without transition. But if you look closely at the package with transition, it's as if the content is trying to jump out. The reason is that padding changes size at a different rate than border-width. The conclusion is that it is possible to calculate with `padding`, but only if you are not going to use `transition` — or want to create a stylish effect. ## Use shadows as a border Since borders have some challenges, we can rather look to another tool. [Box-shadow](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) is another approach to wrapping an element. It behaves differently than a border, and thus has more advantages when it comes to changes. First of all, the box-shadow does not affect an element's size, which means that we do not need to take account of calculating height or padding. Using `box-shadow` as a border can look like this, where we use either an outer or an inner shadow: ![With box-shadow you can set an outer or inner border](https://cdn.sanity.io/images/ah2n1vfr/bekk-blogg-prod/5eaf5dfd1d1114b081b652b4b71c06294164e1d0-1152x648.gif) _With box-shadow you can set an outer or inner border_ Notice that when we have an inner shadow without interactivity, it looks like a border set with `border`. Whilst the outer shadow is placed outside the element's size, which is different from `border`. We can choose whether to have an outer or inner border with the `inset` value. The `box-shadow` property allows you to control how spread the shadow is, but when we use it as a border, we only care about 3 values: whether the border should be outside the element, the border size and the color (inset, 4px and green, respectively): ``` button { background-color: red; color: white; padding: 1rem; border: none; } button.outer { box-shadow: 0 0 0 4px green; } button.outer:hover { box-shadow: 0 0 0 16px green; } button.inner { box-shadow: inset 0 0 0 4px green; } button.inner:hover { box-shadow: inset 0 0 0 16px green; } ``` You can just fine only use `box-shadow` alone to style a border, but it can also be useful to know that you can combine `box-shadow` and `border`. Since `border` have certain styles that are not included in `box-shadow`, you may want a certain border-style when it is at rest, but an outer border using `box-shadow` on hover: ![The button on the left is wrapped with border and box-shadow, while the one on the right is only with box-shadow](https://cdn.sanity.io/images/ah2n1vfr/bekk-blogg-prod/da74a2c5e10dd505924841b50fc524839736c580-1152x648.gif) _The button on the left is wrapped with border and box-shadow, while the one on the right is only with box-shadow_ ``` button.combo { border: 4px solid green; border-style: dotted; } button.combo:hover { box-shadow: inset 0 0 0 8px green; } button.box { border: none; box-shadow: inset 0 0 0 4px green; } button.box:hover { box-shadow: inset 0 0 0 8px green; } ``` ## Should I always use box-shadow over border? Both [border](https://caniuse.com/?search=border) and [box-sizing](https://caniuse.com/?search=box-shadow) have good cross-device support, but there may be certain browser versions and devices that override box-shadow. I have experienced that Safari 15 on the iPhone has removed the box-shadow, but this has been resolved by not allowing overriding via the [appearance](https://developer.mozilla.org/en-US/docs/Web/CSS/appearance) CSS property. [Some e-mail clients report problems](https://templates.mailchimp.com/resources/email-client-css-support/) with box-shadow, so also this should be checked whether your styling result is as expected. **The conclusion is that you should start with borders.** If you also need dynamic sizes for the border, use `box-shadow`. You can use it in combination or alone. But make sure to test whether the result is as expected across devices and browsers. ## Final words I think most of us have used `border` to wrap our elements. It works well as long as the size remains the same, but once the size is dynamic, you may want to look at other solutions. `box-shadow` solves this in a good good way, and is a tool you should consider the next time you need a dynamic border.