Rounded Corners and Gradient Backgrounds

[Sonyk]

Hi Y'all,

I have been banging my head against the wall for sometime now trying to find a way to use CSS to implement a rounded corner box on top of a gradient background. I've scoured the Internet for examples, and while some were close they weren't close enough. That being said, here's what I am trying to do (with CSS of course):

I have a rounded box where each of the four corners are images. Each of the images has a transparent background. I have been able to successfully create the rounded corner box, but when I try to apply it to a gradient background it becomes boxy. I've tried several different methods of creating a rounded box so the gradient background comes through (that's why the corner images have a transparent background), but no luck. Does anyone have any ideas or examples to show me where there is a rounded box set against a gradient background?

Thanks.

[FastlaneOne]

have you tried roundedcornr.com?

[Sonyk]

Yeah, I tried that but no luck. What I am going for is a rounded corner box with a solid background color (not gradient) that's set against a gradient background.

[FastlaneOne]

RoundedCornr.com has a rounded corner box with solid background. I believe its the first option on their website.

[Sonyk]

Yeah, I tried that too but no luck, because the rounded images that are generated do not let the gradient background show through, so the box just ends up looking like a regular box with square corners.

[FastlaneOne]

sounds like you'll have to create your own custom corners for that..

[googlelad]

This might help you http://www.456bereastreet.com/archiv...s_and_borders/

[Sonyk]

Thanks for the link. That's exactly what I need to do. Thanks again for the great information.