CODEWITHSUNDEEP
htmlscrollcss
Aleks
Aleks

Reputation: 410

Issue with CSS and border-radius

I need some help with a css 3 issue...

Problem is when I defined a scrollBox with boder-radius and then I scroll to the bottom, there is a clipping issue with the border. There is no problem if the content div is defined with static position, but I need it to be relative for a translation effect.

You can try the following code to see what I mean :

<html>

<body>
    <div class="scrollBox" style="width:50%;height:100px;background:grey;border-radius:10px">
        <div class="content" style="height:100%;overflow:scroll">
            <div>Item</div>
            <div>Item</div>
            <div>Item</div>
            <div>Item</div>
            <div>Item</div>
            <div>Item</div>
            <div>Item</div>
            <div>Item</div>
            <div>Item</div>
            <div>Item</div>
            <div>Item</div>
            <div>Item</div>
            <div>Item</div>
            <div>Item</div>
            <div>Item</div>
            <div>Item</div>
            <div>Item</div>
        </div>

    </div>
</body>

</html>

Hope there is actually a solution for my problem. Thanks !

Upvotes: 1

Views: 601

Answers (2)

skobaljic
skobaljic

Reputation: 9614

Border radius will actually clip the content, not only the background color. All you need is overflow: hidden; for container block .scrollBox

Upvotes: 0

bookcasey
bookcasey

Reputation: 40443

Add a little horizontal padding: .content { padding:0 10px;}

I think border-radius just rounds the corners of the background color, it doesn't actually change the shape/clip the corners of the block.

Upvotes: 2

Related Questions