How does `border-style: double` split the pixels?

Question

How does the browser decide how many pixels each of the 3 lines will get? Here are some cases that I hope will help you understand:

• border: 1px double black => 1,0,0 or 0,1,0 or 0,0,1
• border: 2px double black => 0,2,0 or 1,1,0 or 1,0,1
• border: 4px double black => 2,1,1 or 1,2,1 or 1,1,2
• border: 5px double black => 2,2,1 or 2,1,2 or 1,3,1
• etc.

Are there any inconsistencies between browsers?

I'm mostly curious about this question and would appreciate an answer from a reliable source.

Answer 1

From the specification we can read:

Two parallel solid lines with some space between them. (The thickness of the lines is not specified, but the sum of the lines and the space must equal border-width.)

So basically there is no rule defined thus each browser may use its own implementation. They simply need to respect the sum of the lines.

---

As a side note, the specification doesn't always define the exact behavior. Here is another question related to border too (If border-color is not set, it inherits the color of the element) where you can read UAs may choose their own algorithm.

---

Update

For google chrome you can check the Chromimum source code here: https://cs.chromium.org/ and with some search you will find the component that is used to paint the border BoxBorderPainter and inside there is a function called DrawDoubleBorder(). If you investigate this code you will probably find what you want.

For Firefox you can do the same searching here https://dxr.mozilla.org and you will find the nsCSSBorderRenderer and inside the DrawBorders() function