border-radius + background-color == cropped border

Question

Consider a div with the border-radius, border, and background-color CSS attributes applied:

<div style="background-color:#EEEEEE; border-radius:10px; border: 1px black solid;">
  Blah
</div>

Now consider a similar layout but with the background-color specified in an inner-div:

<div style="border-radius:10px; border: 1px black solid;">
  <div style="background-color:#EEEEEE;">
    Blah
  </div>
</div>

I'm dismayed by the fact that the background-color of the inner <div> is obscuring the border of the outer <div>.

This is a simplified sample of the problem. In reality, I'm using a <table> as the inner element with alternating row colors. And I'm using a <div> as the outer element since border-radius does not seem to work on the <table> element. Here's a jsfiddle of a sample of this problem.

Does anyone have a suggestion for a solution?

Hebraic

Answer 1

Try overflow: hidden in the outer div:

<div style="border-radius:10px; border: 1px black solid; overflow: hidden">
  <div style="background-color:#EEEEEE;">
    Blah
  </div>
</div>

Burdette

This is the better answer. – Memorize

yeah, it worked to me but what does it do overflow:hidden here? is just a plain hack? or does it have a proper reason? thanks a lot – Wrest

It hides overflowing background outside its parent, clean and simple solution. – Ropable

Answer 2

You can fix this by applying overflow: hidden; to the element with the border. A much cleaner way I think.

Baribaric

Answer 3

Add these CSS rules:

tr:first-of-type td:first-child {
    border-top-left-radius: 5px;    
}

tr:first-of-type td:last-child {
    border-top-right-radius: 5px;    
}

tr:last-of-type td:first-child {
    border-bottom-left-radius: 5px;    
}

tr:last-of-type td:last-child {
    border-bottom-right-radius: 5px;    
}

See updated fiddle.

Commotion

This is very nice. I would prefer a version that worked in IE8 but will take this if it's the best that can be done. – Hebraic

Answer 4

You could add border-radius to the child element too.

<div style="border-radius:10px; border: 1px black solid;">
  <div style="background-color:#EEEEEE; border-radius:10px;">
    Blah
  </div>
</div>

Deweese

Answer 5

Does a table have to be used? Here's an example using DIV's: http://jsfiddle.net/6KwGy/1/

HTML:

<div id="container">
    <div class="row">
        <div class="leftHalf">
            <p>data 1</p>
        </div>
        <div class="rightHalf">
            <p>data 2</p>
        </div>
    </div>
    <div class="row">
        <div class="leftHalf">
            <p>data 1</p>
        </div>
        <div class="rightHalf">
            <p>data 2</p>
        </div>
    </div>
    <div class="row">
        <div class="leftHalf">
            <p>data 1</p>
        </div>
        <div class="rightHalf">
            <p>data 2</p>
        </div>
    </div>
</div>

CSS:

.container {
    width: 100%;
}

.leftHalf {
    float:left;
    width:50%;
}

.rightHalf {
    float:left;
    width:50%;
}
.row {
    float: left;
    width: 100%;
}

#container .row:nth-child(odd) {
    background-color: #EEEEEE;
}
#container .row:first-child {
    border-top: 1px solid black;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-radius-topleft: 5px;
    -webkit-border-radius-topright: 5px;
}
#container .row:last-child {
    border-bottom: 1px solid black;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-radius-bottomleft: 5px;
    -webkit-border-radius-bottomright: 5px;
}
#container .row {
    border-left: 1px solid black;
    border-right: 1px solid black;
}

Representational

+1 for exploring other options. But since this uses last-child it too won't work in IE8, so I figure I'm best off using melhosseiny's solution. (it being shorter) – Hebraic

I see, you could always create a unique class for the first and last row that contains the border-radius style. – Representational

Answer 6

Add some padding, or do the background color on the outer element

Tephra

I cannot add padding for design reasons. And as I mentioned, the background color in my real app is from alternating row colors, which would be impossible to define on the outer element. – Hebraic

Answer 7

Would it be acceptable to give the div a little padding? That way the background colors wouldn't conflict.

Beltran

No, it's important to me that the background-color be flush with the border. (i.e., I don't want this) – Hebraic