2

p.para {
  color: red;
  border-style: ridge;
  border-width: 10px;
}
<p class="para">When one value is specified, it applies the same color to all four sides.When two values are specified, the first color applies to the top and bottom, the second to the left and right.When three values are specified, the first color applies to the top,
  the second to the left and right, the third to the bottom.When four values are specified, the colors apply to the top, right, bottom, and left in that order (clockwise).</p>

I haven't specified color for the border and I have set font color. I read that "If border-color is not set, it inherits the color of the element." which means. Border color should be red. But, I am seeing black border.

Can anyone explain the behavior of this?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Vinutha Shashank
  • 43
  • 2

1 Answers1

4

From the specification:

If an element's border color is not specified with a border property, user agents must use the value of the element's 'color' property as the computed value for the border color.

And later we can read

All borders are drawn on top of the box's background. The color of borders drawn for values of 'groove', 'ridge', 'inset', and 'outset' depends on the element's border color properties, but UAs may choose their own algorithm to calculate the actual colors used.

So for some border-style it's not necessary the current color and each browser may handle this differently thus the rendring is not the same within all the browsers.

The below code will give different results with Chrome and Firefox:

p.para {
  color: red;
  border-style: solid;
  border-width: 10px;
}
<p class="para">this is solid</p>
<p class="para" style="border-style: ridge;">this is ridge</p>
<p class="para" style="border-style: groove;">this is groove</p>
<p class="para" style="border-style: ridge solid;">this is ridge and solid</p>
<p class="para" style="border-style: dashed;">this is dashed</p>
<p class="para" style="border-style: groove;border-color:red;">this is groove with color</p>

Result on Chrome

enter image description here

Result on Firefox

enter image description here

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • And yet, if you set the border-color to red, Chrome makes a much better fist of selecting appropriate colors, so the algorithm's pretty dubious. – Alohci Jul 12 '18 at 14:31
  • @Alohci yes and Firefox will pick the current color unlike chrome and the result will not be the same. – Temani Afif Jul 12 '18 at 14:37
  • Even IE's been using the computed color for 9 years. – Alohci Jul 12 '18 at 14:59