in css by fyd on 25 Apr 2008
A quick CSS tip. Don't want your css border to have the same color for every side. Well, you can make each side have a different color - it's easy.
.exampleBox
{
width: 100px;
height: 100px;
border: 3px solid #000000;
border-color: #ff00ff #00ff00 #0000ff #00ffff;
}
Some text in the box
Let's take a closer look at the css border properties. We start off by creating a border: that has a 3px 'stroke' that is solid and the color black. The next property we use is border-color:. The format here is TOP, RIGHT, BOTTOM, LEFT - or clockwise around the square starting from the top. Even though we set a color in the border: property, we put border-color below it which gives it precedence - or it 'overwrites' the border's color.
Need the HTML - I used an embedded stylesheet here, but this will work the same in an external stylesheet.
<html> <head> <title>CSS Different Colored Border</title> <style type="text/css"> .exampleBox { width: 100px; height: 100px; border: 3px solid #000; border-color: #ff00ff #00ff00 #0000ff #00ffff; } </style> </head> <body> <div class="box"> <p> Some text in the the box </p> </div> </body> </html>
Popularity: 7% [?]
