48

I have issue with border-color. It didn't work. I'm new to css here is the fiddle. http://jsfiddle.net/zeburrehman/aFzKy/151/

<div id="box">
Hello! The color of box border should be red!!
</div>​

#box {
border-color: red;
}​
1
  • 5
    You need to add the width and style of the border.
    – Vucko
    Commented Jan 4, 2013 at 11:53

6 Answers 6

110

By default the border-width is 0 and border-style is none

So you need to set them to border-width:1px and border-style:solid. You can combine all the border properties into one as below:

#box {
    border:1px solid red
}
3
  • 2
    Please check it.... Here is updated fiddle. i set separately style and size but it give me black color where as i want red color. jsfiddle.net/zeburrehman/aFzKy/152 Commented Jan 4, 2013 at 12:02
  • 2
    remove border:1px from your fiddle. Updated here - jsfiddle.net/aFzKy/153
    – Ashwin
    Commented Jan 4, 2013 at 12:04
  • The reason border:1px was causing problems is because CSS is parsed from top to bottom. And styles are overridden in this order. When you specify border:1px, default values are assigned to border-style and border-color
    – J. Stott
    Commented May 23, 2019 at 14:48
6

I had an issue where it seemed that border-color was not being respected, confusingly it even showed having the right color in the style inspector in Chrome (possibly a Chrome bug). The key thing for me was that if the shorthand border style is specified, it sets all three aspects of the border style, regardless of if they are included or not so:

border-left: 1px;

Actually overwrites both the border-left-style and border-left-color properties even though they weren't included. This can for example cause an inherited style to be overridden and appear not to work.

0
2

You need to add the border style:

#box {
    border: 1px solid red;
}
2
#box{
    border:3px solid #aacfac;
    }

I hope this helps!

0

You can use hex color code for red as well, which is #ff0000 (RGB). 100% Red, 0% Green and 0% Blue if you want pure red color.

#box {
   border: 2px solid #ff0000;
}
-1

Try this : border: 5px solid red;

2

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.