0

Possible Duplicate:
CSS3 Inverted Rounded Corner

Is there a way to have a CSS border corner round in the opposite direction? I'm not talking about inverted.

Say you have two divs stacked vertically, concerning the bottom border of the top div where the two meet, I want the corner to curve in the direction the bottom div's would, but be of the top div.

edit: Basically, something that looks like this: opposite rounded corner

Pumbaa80 was right, it is a duplicate of CSS3 Inverted Rounded Corner. I don't exactly understand how it works, but I was able to recreate it and now I'm just adjusting its positioning.

Community
  • 1
  • 1
thekthuser
  • 706
  • 1
  • 12
  • 28
  • 3
    Just cheat. Create a round div and absolutely position on top of that div with a higher z-index :) – PhD Sep 29 '12 at 01:29
  • I can't, I want the corner on the other side to curve in the normal direction and the edge of that uncurved corner would show behind the one on top. – thekthuser Sep 29 '12 at 01:44
  • 2
    Maybe provide a quick mockup image of what you mean? I don't exactly understand what your wanting to acheive and was also thinking the layered div approach that @PhD said would work. – GorrillaMcD Sep 29 '12 at 04:08
  • 1
    You might be able to get something from this article http://css-tricks.com/better-tabs-with-round-out-borders/ – j08691 Sep 29 '12 at 20:54

1 Answers1

0

This will create the line which you've illustrated:

http://jsfiddle.net/hF8w5/

Could be contained within an absolutely positioned div and positioned where you want it.

Nw167
  • 169
  • 5