CODEWITHSUNDEEP
cssgoogle-chrome
Sam Leurs
Sam Leurs

Reputation: 490

css borders in chrome too thick

I have a problem that happens only in Google Chrome. The borders appear to be "too thick". In Firefox, everything seems normal (I've tested in chrome and firefox only so far).

As you can see on the image, there are 2 problems:

1) upper arrow: the borders are to thick (it is 1px solid #aaa). When I draw a table with css, the borders are normal. This happens only with div's and form input fields.

2) lower arrow: the background of the inner div slightly goes above the border of the outer div.

Image

Could this be a bug in Chrome?

.outer-div{
    border: 1px solid #aaa;
    box-sizing: border-box;
}
.outer-div > .inner-div{
    padding: 5px;
    background: linear-gradient(#eee,#ddd);
}

EDIT: the code that produces the results where the lower arrow is pointing at.

.calendar-events-block{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin: 15px 0;
    border: 1px solid #aaa;
}

.calendar-events-block > .events{
    flex: 1 1 auto;
}

.calendar-events-block > .events > .title{
    padding: 10px;
    font-weight: 700;
    border-bottom: 1px solid #aaa;
    background: linear-gradient(#eee,#ddd);
}

EDIT 2: If I zoom out to 90%, everything seems normal (like in Firefox).

EDIT 3: a jsfiddle (http://jsfiddle.net/p31ajt48/) with the problem.

EDIT 4: Funny detail: when I zoom in or out, the problem with the "overflow" (the background of the title that goes over the border) dissapears.

Another screenshot:

enter image description here

Left you have a table, at the right you have some divs. The border of the table = 1px solid #aaa, the border of the divs = 1px solid #aaa, but the tabel borders are much thinner than the div borders.

Upvotes: 1

Views: 2944

Answers (1)

goteee
goteee

Reputation: 86

Since this is only happening in chrome, It's probably got to do with chrome's default styling. Try adding a css reset to the document or try adding

* {
border: none;
}

to your body.

Upvotes: 1

Related Questions