Menu
I'm seeing a rendering issue for a 2px dotted border similar to CSS dotted border issue in adjacent columns in a table rendered as dash in Chrome but on desktop Safari and Chrome. I tried several widths and it happens in all of them
This is a sample:
the vertical line ending has the same issue but it's out of the picture.
Sample: http://jsfiddle.net/bcdQQ/
201
IF you're only targeting modern browsers, AND you can have your border on a separate element from your content, then you can use the CSS scale transform to get a larger dot or dash: border: 1px dashed black; border-radius: 10px; -webkit-transform: scale(8); transform: scale(8);
The task is to increase space between the dotted border dots. you can just adjust the size with the background-size property, the proportion with the background-image property, and the proportion with the linear-gradient percentages. So, you can have several dotted borders using multiple backgrounds.
dashed: A series of square dashed lines are used as a border. double: Two lines placed parallel to each other act as the border. groove: Displays a 3D grooved border, its effect depends on border-color value. ridge: Displays a 3D ridged border, its effect depends on border-color value.
This issue happens if the width is not divisible by the border-width.
This works: http://jsfiddle.net/bcdQQ/5/ (i made it a little bit bigger, for better sight)
#prodpre {
border-bottom: #555 5px dotted;
height: 20px;
margin: 0px 0px 2px 0px;
padding-bottom: 10px;
width: 505px;
}
So, the only possibility to catch this issue, would be a javascript solution, which corrects the width of the div, so it is divisible by the border-width (cause it is dynamically in your example).
120
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
