CSS Dotted Line in the box is messed up at the corner and looks weird

Asked Jul 21 '14 at 05:16

Active Jul 21 '14 at 06:32

Viewed 199 times

I am using css for dotted line:

Problem is that Dotted Line in the box is messed up at the corner and looks weird:

CSS CODE IS:

.dotted-box {
    border: 3px dotted #4a4a49;
    border-radius: 0;
    box-shadow: none;
    margin: 69px auto 10px !important;
    padding: 3px;
    width: 75% !important;
}

Please check this on fiddle

IT should be look like following image: enter image description here

Is there anyway to solve this issue?

asked Jul 21 '14 at 05:16

Husen

so what should it look like? – King King Jul 21 '14 at 05:17
@KingKing i've added image for your reference. I need it like this – Husen Jul 21 '14 at 05:21
1

@Husen unless your div has fixed size so that we can choose the best width and height for your div. Otherwise we don't have any way to render it perfectly like that unless playing with some JS. – King King Jul 21 '14 at 05:42
1

IMHO `border-radius: 4px;` makes it a bit better (not perfect), nothing else can be done for a dynamic box I think, tho. http://jsfiddle.net/gbgB4/33/ – Martin Braun Jul 21 '14 at 05:57
Chrome and FF 30 have a known Bug when giving border `dotted`. – Kheema Pandey Jul 21 '14 at 06:02

CSS Dotted Line in the box is messed up at the corner and looks weird

0 Answers0