Reverse border-radius?

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • HaLo2FrEeEk
    Contributor
    • Feb 2007
    • 404

    Reverse border-radius?

    I couldn't think of a better title. Basically what I want to do is to create a rounded corner that flares out from the edge, instead of into it. Take a look at the attachments, the red line in the close up represents the bottom of one div, the rounded corner of the one immediately below it flares out, creating a reverse corner that really helps to blend the two elements together.

    I can think of one way to do it, and that would be overlapping a div with a regular rounded corner onto a div with the same color as the one above it. The problem with that, in my case, is that the elements have transparency, and there is a background image.

    Is there a way to do this?
    Attached Files
  • drhowarddrfine
    Recognized Expert Expert
    • Sep 2006
    • 7434

    #2
    There is no such thing in CSS though I have seen it done using tricks.

    Comment

    • HaLo2FrEeEk
      Contributor
      • Feb 2007
      • 404

      #3
      The only way I'd be able to do it would be with images, because of the transparency on the elements. It's ok though, I decided it actually looks better without the inner rounded corner.

      Comment

      • MusoFreak200
        New Member
        • Oct 2009
        • 96

        #4
        @ drhowarddrfine

        can you explain that to me?
        i would also like to know if this is possible and if so how do u do it using "tricks"?

        Comment

        • drhowarddrfine
          Recognized Expert Expert
          • Sep 2006
          • 7434

          #5
          I don't recall. I presume it was done the same way as rounded corners with images but the images were reversed.

          Comment

          Working...