Multi Colored Border using CSS

James

February 15, 2014

Few days back i came across a situation where i needed to use multi-colored borders and didn't want to use image for this purpose as client needed the border colors to be managed from the admin panel. So i came across a solution to create multi-colored borders using just CSS. This tutorial will guide you through the process to create awesome multi-colored borders using just CSS3 box-shadow.

HTML Code

[html]
<div id="wrapper">
<div id="content">
Awesome Multi-colored Borders using CSS
</div>
</div>
[/html]

CSS Code

[css]
#wrapper{ width:100%; background:#ccc;
margin-top: https://xanaxtreatanxiety.com 20px;
border-top: 5px solid blue;
border-bottom: 5px solid blue;
box-shadow:
0 -5px 0 red, 0 5px 0 red,
0 -10px 0 yellow, 0 10px 0 yellow,
0 -15px 0 green, 0 15px 0 green,
0 -20px 0 purple, 0 20px 0 purple;
padding:10px;
}
[/css]

Leave a Reply

Your email address will not be published. Required fields are marked *

We trade to make your work effortless, Subscribe our newsletter to stay updated.

We respect your security and won’t disclose your email to anyone.
Experience remarkable WordPress
products with a new level of power,
beauty, and human-centered designs.
© Magnigenie - All Right Reserved 2023
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram