Question

I’m trying to use a border property on a div that is using a border-radius property.

Here’s my CSS:

#page {
    border: 1px solid #beb2b2;
    width: 732px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

So as you can see I just put a border radius (with all different properties for each browser) as well as a border of 1px. The problem is border isn’t drawn on both top corners. It’s drawn everywhere else including bottom corners. I looked for something on google but can’t find anything…

Any idea ?

Answer 1

Problem in the other markup and styles, because your css is correct: testcase on dabblet

Try to add some margin: #page { margin: 15px; } May be border is simple invisible or container of #page hide border with overflow: hidden;

Update: Problem also may be exists in inner images which can override or ignore some parent properties (e.g border-radius).