Rounded Corners

miershpedankl · Post by **miershpedankl** » Fri 25. Aug 2006, 16:32

Good Day Everyone!

Can someone explain to me how to round the corners of the tables/blocks/boxes ?? on my site? (the-lee-family.us) I am gathering that it is a CSS thing, but I can't figure it out. Any help would be great.

Thanks,
miershpedankl

Post by **Oliver Georgi** » Sat 26. Aug 2006, 08:23

That's hard to say - there are many possible ways to have rounded corners.

CSS is a bit tricky because just Mozilla can handle rounded corners. So there are two possible ways at the moment. Use aligned images or just a combination of background images.

The most simple thing is this:

Code: Select all

<div id="wrapped">
<div id="top_corners">
<img src="toprounded.gif" width="200" height="15" alt="" />
</div>
<div id="content">
your content
</div>
<div id="bottom_corners">
<img src="bottomrounded.gif" width="200" height="15" alt="" />
</div>
</div>

related CSS

Code: Select all

#wrapped {
  margin:0;padding:0
}
#top_corners, #bottom_corners {
  width:200px;
  margin:0;
  padding:0;
}
#content {
  background-color:#FFFFFF;
  margin:0;
  padding:0 10px 0 10px;
}

Oliver

Post by **update** » Sat 26. Aug 2006, 12:19

Hi,

have a look here please:
http://cssplay.co.uk/boxes/snazzy.html
and here:
http://cssplay.co.uk/boxes/snazzy2.html
and here:
http://cssplay.co.uk/boxes/curves.html
and here:
http://cssplay.co.uk/boxes/krazy.html

I like this site - teaches me a lot

greetings
claus

miershpedankl · Post by **miershpedankl** » Sat 26. Aug 2006, 12:44

You guys are great! Thanks for the replies. I am going to be checking out both of these recommendations and I'll let you know how it goes. http://cssplay.co.uk is great for people like me that don't have a lot of experience.

Cheers,
miershpedankl

Post by **update** » Wed 6. Sep 2006, 15:48

Hi,

...and I'll let you know how it goes...

How "goes" it?

Greetings
claus

isac · Post by **isac** » Wed 6. Sep 2006, 16:34

to late?

more about subject: http://www.alistapart.com/articles/customcorners

nehemia · Post by **nehemia** » Sat 23. Sep 2006, 14:00

Further Solution for margins with rounded corners without using grafics.

I found out a further solution for making margins with rounded corners. Please look here. (Sorry, I wrote it only in German).

Regards,
Martin Gohla

Weitere Lösung für Rahmen mit runden Ecken ohne Nutzung von Grafiken

Ich habe eine weitere Lösung zur Erstellung von Rahmen mit runden Ecken herausgefunden. Bitte schaut mal hier.

Viele Grüße,
Martin Gohla

miershpedankl · Post by **miershpedankl** » Thu 28. Sep 2006, 20:36

Ha -- I haven't even gotten around to this. I did, however, look at the CSSplay sites for a while and there is a lot of great info there! I just have to find some time to sit down and mess around till I get it right.

Whenever that happens I'll post something here letting everyone know how it went.

Thanks again for the replies!

miershpedankl

Rounded Corners

Rounded Corners

Solution for rounded corners / Lösung für runde Ecken