πŸŽ‰ We just launched a new HTML course! Get 3 courses with 33% off! πŸŽ‰
πŸ’‘ This page contain affiliate links. By making a purchase through them, we may earn a commission at no extra cost to you.
How to Create Multiple Border in CSS with One Rule

How to Create Multiple Border in CSS with One Rule

Ferenc Almasi β€’ πŸ”„ 2022 June 07 β€’ πŸ“– 1 min read
  • twitter
  • facebook
πŸ“˜ 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? Check out how you can do so using the below tutorial:

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
Did you find this page helpful?
πŸ“š More Webtips
Frontend Course Dashboard
Master the Art of Frontend
  • check Unlimited access to hundreds of tutorials
  • check Access to exclusive interactive lessons
  • check Remove ads to learn without distractions
Become a Pro

Courses

Recommended