border dashed and jagged dash. How to manage the first dash

Question

css

Here is the actual question:

border-bottom: Xpx dashed #f00

Is it possible to make the first dash not torn, and how is this determined in general?

Answer 1

I don’t know how to overcome this problem, but as an alternative, these are gradients jsfiddle.net/yyHNp/5/

Answer 2

I just checked one of our projects, where we also used this way of underlining. The broken dash is only seen in Chrome. In IE, FF, Opera, Safari, everything is fine, the first dash has a full length. So it seems to depend on the browser.