Rounded Corner Div with Image and Text

Question

I am trying to create a div that has rounded corners that contains a div and text. I am having problems trying to get my rounded corners to show as it seems the overflow:hidden; is not working.

I was reading this post that explained that both the image and parent div needs position:static; but once I do that .text does not appear above the image.

HTML:

<div class="span8 cell">
    <img src="http://www.placehold.it/400x200">    
    <div class="text">text</div>
</div>

CSS:

.cell {
    width: 400px;
    height: 100%;
    overflow: hidden;
    border-top-left-radius:5px 5px;
    border-top-right-radius:5px 5px;
    border-bottom-left-radius:5px 5px;
    border-bottom-right-radius:5px 5px;
    -moz-box-shadow: 0 1px 3px #000;
    -webkit-box-shadow: 0 1px 3px #000;
    box-shadow: 0 1px 3px #000;
    background: #e5e5e5;
    position: relative;
    margin: 30px;
}

.cell img { position: static; }

.cell .text{
    height: 100%;
    color: #fff;
    font-weight: bold;
    position: absolute;
    top: 0;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    padding: 20px;
    text-align: left;
}?

I'm testing your code and I see the rounded corners just fine. Exactly what problems are you having? Are you looking at it in an old browser like IE6? — Number1SuperGuy, Oct 05 '12 at 20:23
I'm using Chrome. Let me take a snapshot of what I'm seeing. — Jon, Oct 05 '12 at 20:23
Odd. The problem is gone now. I must have accidentally overwrote my CSS. I'll remove this question in a few minutes to give you a chance to read my findings :) — Jon, Oct 05 '12 at 20:25
As a note, the default positioning of an element is static, so you shouldn't need to set it manually — Alex, Oct 05 '12 at 20:30

score 0 · Accepted Answer · answered Oct 05 '12 at 20:26

In Chrome, any elements that lie on top of rounded corners also need their corners rounded. In this example you'll want to round the corners of your image like this:

.cell img {
    border-top-left-radius:5px 5px;
    border-top-right-radius:5px 5px;
    position: static;
}

Rounded Corner Div with Image and Text

1 Answers1