-1

I am just using a simple CSS code for this:

button {
border: 1px dotted #bebebe;
background: #eeeeee;
font-size: 20px;
color: black;
padding: 7px;
border-radius: 4px;
}

But the dotted border doesn't show up in the left side:

Dotted Button

What am I doing wrong?

EDIT:

Well, for everyone who has this problem, it is about the navigator you're using and zoom. I don't know why but some buttons you can see the border in all sides, and some buttons you can't.

Afonso Matos
  • 75
  • 1
  • 9

2 Answers2

4

There are bugs in browsers in rendering one pixel wide dotted borders, see e.g. the Mozilla bug report Dotted/dashed border-radiused corners are rendered as solid and the Chromium bug report Another Border-Bug: dotted line turns solid on the half way. You seem to have triggered one of such bugs in Chrome. Testing your jdsfiddle in Chrome 28beta on Win 7, I can see the left border as solid and the bottom border solid in the left half. (This is a bit difficult to see but it becomes more visible if you take a screenshot and zoom it or set the border color to red, for example.)

I’m afraid it might be difficult to find an acceptable workaround. In this particular case, the bug seems to disappear if you remove the rounding of corners (which you probably don’t want to do) or set the border width to 2px.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
0

A dotted 1px border is very hard to see. If you zoom in Cntrl + + I think you'll see that there is actually a dotted border.

Alternatively, changing 1px to 2px : border: 2px dotted #bebebe; also shows that the border is present.

EDIT: Remove the border-radius: 4px; and you'll see the dotted border.

Danield
  • 121,619
  • 37
  • 226
  • 255
  • In Chrome at 1px, it's correctly dotted when you zoom in, but not when you don't zoom in. Take a screenshot at 100% zoom, then zoom into the screenshot. No dots. – RichieHindle Jun 30 '13 at 11:32