Rounded Rectangles on CSS Code

[EzLogic]

Can anyone assist? If you click below to view this page, I need help making the squares into rounded rectangles. On the page itself you will see what I am aiming for them to look like in image form.

http://www.boxingaddicts.com/css/index.html

Thanks to anyone who can help!


Ali Koumaiha
Farmington Hills, MI

 

[ChrisHirst]

Google Search

Chris.

Indifference will be the downfall of mankind, but who cares?

http://www.candsdesign.co.uk

A website that proves the cobblers kids adage.

http://www.cram-system.com

Nightclub counting systems

So long, and thanks for all the fish.

 

[EzLogic]

Is there any way to do it without graphics?

 

[Foamcow]

nope

at the very least you will need to make 2 round "ends" and use them as background images.

http://www.foamcow.com

 

[manarth]

mozilla has a rounded corners attribute - but this is mozilla specific; it'll be lost on 90% of surfers.

css3 plans to cater for rounded corners - but again, no implementation as yet.

stick with your images for now!

<marc> i wonder what will happen if i press this...[ul][li]please tell us if our suggestion has helped[/li][li]need some help? faq581-3339[/li][/ul]

 

[ChrisHunt]

Take a look at

http://www.alistapart.com/articles/mountaintop/

,

http://www.alistapart.com/articles/customcorners/

and

http://www.alistapart.com/articles/customcorners2/

. You should find something there to help you.

-- Chris Hunt

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

 

[EzLogic]

If you check out the link in my original post, when you highlight any of the boxes (links) on that page they enlarge. Is there any way to do THAT with rounded corners?

Thanks in advance.

Ali Koumaiha
Wireless Toyz
Farmington Hills, Michigan

 

[manarth]

yup. make the content in the box bigger; the rounded corners should be pushed out. it depends on the way you're doing the rounded corners.

Those listapart articles should point you in the right direction.

you may wish to use:
a {padding: 2px;}
a:hover {padding: 3px;}


<marc> i wonder what will happen if i press this...[ul][li]please tell us if our suggestion has helped[/li][li]need some help? faq581-3339[/li][/ul]