How to Create Multiple Border in CSS

Did you know that you can create multiple borders in CSS using the box-shadow property? You need to set the blur and offsets to 0 and give it a spread value. By comma separating the different rules, you can create as many borders as you'd like to:

.borders {
    width: 100px;
    height: 100px;
    background: #1E88CE;
    transform: rotate(45deg);
    box-shadow: 
        0 0 0 5px rgb(255 255 255 / 25%),
        0 0 0 10px rgb(255 255 255 / 25%),
        0 0 0 15px rgb(255 255 255 / 25%);
}
borders.css
Copied to clipboard!

The code example above, uses 3 different box shadows, each one larger by 5px from the other. The values mean offsetX, offsetY, blurRadius, spreadRadius in this order. It will create the following effect:

Did you know that you can also create pixel-art from box-shadows using the very same technique, and some help from Sass to simplify the process?

How to Make Pixel Art With Box Shadows
How to Create Multiple Border in CSS
If you would like to see more Webtips, follow @flowforfrank

Resources:

Remove ads
Remove ads

๐Ÿ“š Get access to exclusive content

Want to get access to exclusive content? Support webtips with the price of a coffee to get access to tips, checklists, cheatsheets, and much more. โ˜•

Get access Support us
Remove ads Read more on
Remove ads
Remove ads
๐ŸŽ‰ Thank you for subscribing to our newsletter. x This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.