CODEWITHSUNDEEP
htmlcss
Tearsdontfalls
Tearsdontfalls

Reputation: 787

Border-radius breaks in the corners

I designed a contentbox for a website and on the desktop it looked good. But now I want to put it on the mobile.
You can see a example with only relevant html+css here http://pastehtml.com/view/bze2phhwn.html
On my smartphone, ive seen that the border-radius breaks(it displays the background color instead of the border color) in the rounded corners for 1-3px and you can see this effect also on the browser if you zoom in a little bit. Its weird, because if you zoom a little bit out and in, you`ll see that this effect isnt always there. So I tought that it isnt my bad html+css.

What might be the problem?

Upvotes: 0

Views: 1130

Answers (2)

RoboYak
RoboYak

Reputation: 1482

I think this is a bug as well, but I found a fix... err maybe it would be considered a hack. Here is an image of my issue:

http://i909.photobucket.com/albums/ac298/roboyak/missingBorder_zpsbhftdfmd.png

So my story is that I was getting a reset.css style sheet imposed on me from the parent web page. The td element was getting the following style from that css sheet:

table tbody tr td {
    border-bottom: 1px solid #ccc;
}

Long ago when I started the project I overrode this style by stating the following rule in my sheet:

table tbody tr td {
    border-bottom: none;
}

In trying to solve my problem I noticed that the border-bottom rule was showing up as "medium none" instead of none. I added the following code, and the border was no longer broken.

 table tbody tr td {
     border-bottom: none none;
 }

Essentially this breaks the rule so the border comes back again on all td's which is not what I want, but I think that this may give some insight into what is happening.

Upvotes: 0

scorpio1441
scorpio1441

Reputation: 3098

This seems to be a bug. Submitted to Mozilla:

https://bugzilla.mozilla.org/show_bug.cgi?id=758958

Also: https://stackoverflow.com/questions/10774506/border-radius-causes-white-lines-when-applied-to-individual-corners/10774635#10774635

Upvotes: 1

Related Questions