CODEWITHSUNDEEP
google-chromecsssafariwebkit
user578895
user578895

Reputation:

webkit hide content overflowing from border-radius

http://jsfiddle.net/Bery8/3/

I have a node that has position: relative, and a border-radius. I'm trying to hide the content that flows out of the border-radius, wondering if anyone has a fix for this in webkit. I need the relative positioning for another purpose and can't remove it.

Seems to work fine in mozilla.

<div>
    foo
    <span>content</span>
    <span>content</span>
    <span>content</span>
    <span>content</span>
    <span>content</span>
</div>

<style>
div {
    border        : 1px solid #000;
    border-radius : 20px;
    overflow      : auto;
    position      : relative;
    margin        : 10px;
    max-height    : 100px;
}

span {
    display    : block;
    background : teal;
    padding    : 10px;
}
</style>

Upvotes: 0

Views: 293

Answers (2)

C. Leung
C. Leung

Reputation: 6318

add border-radius to span too

Upvotes: 1

Ilia Frenkel
Ilia Frenkel

Reputation: 1977

I'm not sure I understand the problem, but if you add border-radius: 20px to the span element does it solve it?

Upvotes: 1

Related Questions