CSS Dotted Border Render Issue

CSS dotted border render issue

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).

CSS dotted border issue in adjacent columns in a table rendered as dash in Chrome

You can set horizontal border-spacing to even number of pixels between cells and between border's dots.

For example: http://jsfiddle.net/Gmhuw/

You can't "fix" it by modifying your table's style, these dots are interpreted that way by Chrome. That's just the browser's limiation.

CSS dotted border renders as dashed in Chrome

If it's important that the borders are the same you can look into the CSS3 border image property: http://www.css3.info/preview/border-image/ for Chrome it will be -webkit-border-image:

Dashed border rendering bug in IE8

I don't think you should use hacks to compensate for bad browser behavior.
It's better to accept that your content and styling is different across browsers and it's not worth trying to look everything the exact same in every browser.

Does a solid line work though? You could make a CSS file for IE only that uses slightly different styling.

1px dotted border render in IE11/Edge

It does seem to be a browser bug. I can confirm on IE11/Win7 and it affects other elements, not only input fields.

After some testing I found out that the problem occurs when the element's dimensions are even numbers, e.g. 500px wide or 40px high.

Using odd numbers like 501px wide and 41px high is a temporary workaround:

body {

 background: #181818;

}

input {

    display: block;

    padding: 0 10px;

    height: 40px;

    margin: 15px 0;

    color: #C2C2C2;

    background: #000;

    border: 1px dotted #FFF;

    outline: none;

    width: 500px;

}

#input2 { width: 501px; height: 41px; }

<input id="input1" type="text" placeholder="500px wide (even)">

<input id="input2" type="text" placeholder="501px wide (odd)">

How to increase space between dotted border dots

This trick works for both horizontal and vertical borders:

/*Horizontal*/
background-image: linear-gradient(to right, black 33%, rgba(255,255,255,0) 0%);
background-position: bottom;
background-size: 3px 1px;
background-repeat: repeat-x;

/*Vertical*/
background-image: linear-gradient(black 33%, rgba(255,255,255,0) 0%);
background-position: right;
background-size: 1px 3px;
background-repeat: repeat-y;

You can adjust the size with background-size and the proportion with the linear-gradient percentages. In this example I have a dotted line of 1px dots and 2px spacing.
This way you can have multiple dotted borders too using multiple backgrounds.

Try it in this JSFiddle or take a look at the code snippet example:

div {

  padding: 10px 50px;

}

.dotted {

  border-top: 1px #333 dotted;

}

.dotted-gradient {

  background-image: linear-gradient(to right, #333 40%, rgba(255, 255, 255, 0) 20%);

  background-position: top;

  background-size: 3px 1px;

  background-repeat: repeat-x;

}

.dotted-spaced {

  background-image: linear-gradient(to right, #333 10%, rgba(255, 255, 255, 0) 0%);

  background-position: top;

  background-size: 10px 1px;

  background-repeat: repeat-x;

}

.left {

  float: left;

  padding: 40px 10px;

  background-color: #F0F0DA;

}

.left.dotted {

  border-left: 1px #333 dotted;

  border-top: none;

}

.left.dotted-gradient {

  background-image: linear-gradient(to bottom, #333 40%, rgba(255, 255, 255, 0) 20%);

  background-position: left;

  background-size: 1px 3px;

  background-repeat: repeat-y;

}

.left.dotted-spaced {

  background-image: linear-gradient(to bottom, #333 10%, rgba(255, 255, 255, 0) 0%);

  background-position: left;

  background-size: 1px 10px;

  background-repeat: repeat-y;

}

<div>no

  <br>border</div>

<div class='dotted'>dotted

  <br>border</div>

<div class='dotted-gradient'>dotted

  <br>with gradient</div>

<div class='dotted-spaced'>dotted

  <br>spaced</div>

<div class='left'>no

  <br>border</div>

<div class='dotted left'>dotted

  <br>border</div>

<div class='dotted-gradient left'>dotted

  <br>with gradient</div>

<div class='dotted-spaced left'>dotted

  <br>spaced</div>

CSS Border-collapse in conjunction with dotted border

border-collapse is your culprit.

I ran into this issue with a dotted bottom border is a table (that was actually a table, not a layout).

First, set "border-collapse: separate;"

Anything with a border, set the border;

Then set the border width to 0px for anything that did not have a border.

That should get you there for Chrome.

---

Related Topics