How to add multiple borders to a div (or any HTML element)

  1. Previous
  2. Next
  3. Recent

    1. Signs 'He' May be Cheating on You
    2. 7 Vows of Hindu Marriage - Know What 'Saat Vachans' Mean
    3. RuPay vs Visa vs Mastercard vs American Express- A Comparison
    4. What is RuPay? Everything You Need to Know About India's Domestic Payment System!
    5. Top 10 Online Portals to Find a High Paying Job in India
    6. Top Indians who Revolutionized the IT Sector in India
    7. 8 Initiatives by Narendra Modi that Could Change the Future of the Nation
    8. 8 Work-from-home Jobs for Housewives, Students, and Part timers
    9. Complete Company Registration Process in India - Explained
    10. Change Name in India in 5 Steps - Filing Affidavit, Newspaper Ad & Gazette Notification

Adding border to a HTML element is no rocket science. It can easily be done as,


element-name
{
border:1px solid red;
}

But how to¬†add multiple borders to a div or any other element? CSS ‘border’ property can’t be used more than once. And if used, the newer border values will override the older ones.

But there is a way of doing this, and that’s by using CSS ‘outline’ property alongwith the ‘border’ property.

‘outline’ works the same as ‘border’. Its basically designed to make an element standout of others.


<p></p>

<style>
p{
margin:100px;
width:500px;
height:100px;
border:2px solid black;
outline:5px solid lime;
}
</style>

And this is a div with black and lime colored borders.

multiple colored borders

blog comments powered by Disqus