SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2005
    Location
    Texas, USA
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Rounded Corners and Gradient Backgrounds

    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.

  2. #2
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    have you tried roundedcornr.com?

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2005
    Location
    Texas, USA
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    RoundedCornr.com has a rounded corner box with solid background. I believe its the first option on their website.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2005
    Location
    Texas, USA
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sounds like you'll have to create your own custom corners for that..

  7. #7
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  8. #8
    SitePoint Enthusiast
    Join Date
    Jun 2005
    Location
    Texas, USA
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the link. That's exactly what I need to do. Thanks again for the great information.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •