Working on bug : https://bugzilla.mozilla.org/show_bug.cgi?id=652650 .

Logic [copy on bugzilla as well ]:

Proposed way to render dashed corners:

Dash length is taken 2*(border width).In the event of having different border width resulting in different dash lengths , the largest of them is taken as dash length[common dash length]. Gap length is calculated but is limited to [0.5*dashLength,dashLength) .

To calculate the gap length . First ‘side’ here on refers to part of side minus the corner paths plus the part of corners [demarcated by angle a , tan(a)= ratio of border widths] adjoining to the side. Length of side is length of path of center along the side. Each side ends on either side in half a dash.Gap length is calculated such that we have exactly we have exactly n dashes , n+1 gaps and half dash on each end. Having the constrain n is integer , gapWidth in [0.5*dashLength,dashLength) and that lower value of gap width given precedence[in case two cases possible] we get symmetrically placed set of dashes along the curve.

Sample Calculation :

Case :

border-width:50px; width:800px; height: 800px; border-radius:100px;

side without corner paths = 800 – 2*50 = 700px

angle of demarcation tan(a) = 50/50 = 1 => a = pi/4

curved path to be added = 2*[75 * pi/4] = 118px

total length = 818px

dash length= 2*50 = 100px

818 = 2*50 + (n+1)x + n*100 [x -> gap width]

n = 4 ,gap width = 64px

### Like this:

Like Loading...

*Related*

## About anil

science is my passion
so im here for it