Jex 0

Basically my goal is for my page content div to be encapsulated in a round rectangle. Sort of like this:

Top of round rect (White)
Page content (uses a white rectangular css background)
Bottom of round rect(White)

So then the page content section can be as long as I need and retain the round rect shape. I'm just not sure the best way to do this. I tried adding an img to the top of pagecontent div, but the transparent areas were overridden by the pagecontent's background. Thanks

2 answers

Mottie 1134
This was chosen as the best answer

Once CSS3 standards are implemented on all browsers you can use border-radius, but until then check out some CSS solutions to adding rounded corners: 25 Rounded Corner Techniques (includes using CSS and images)

There are also some javascript & jQuery addons to automatically add rounded corners, but you didn't specify what you planned on using.

Answered over 9 years ago by Mottie

I usually do it by creating a:

<div class="content">All the content you can put here<span class="bottom"></span></div>

From there you just cut the top corners as background for content, if it's some sort of weird color, with shadows or borders etc, then it should be very very long. then for the span make it a position absolute bottom with a background image of the bottom corners. This one can be small. Now this only works if the with will be constant and only the height is the thing that changes. Otherwise we have use jquery with 4 spans that are replaced with images for the corners, that are all absolute positioned.

This is of course all to maintain browser compatibility.

Answered over 9 years ago by Eskill Company
  • That will do it. Good answer, Eskill Company. +1 Abinadi Ayerdis over 9 years ago