Toggle sidebar Toggle sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Best way to achieve rounded rectangles on an html site

F

Fromethius

macrumors member
Original poster
Hello,

For the site I am working on I am currently using tables to display everything. Although it looks nice, I think it would look better with rounded rectangles (what doesn't?). All the methods I have found so far requiring using photoshop and generating around 9 images (the four corners, the 4 sides, and a dot) and then positioning them using fine css (which isn't necessarily a problem) and html divs and so far I have not gotten any to work properly.

I'm not looking for a fancy orange and pink striped rounded rectangle with shadows, but rather, a simple black or maybe light or dark grey normal table, except with curved edges.

Hopefully this isn't too difficult?
 
dejo said:
Check this out:

http://www.the-art-of-web.com/css/border-radius/
Click to expand...

Too bad for the lack of support on it for now. Images seem to only decent way of doing this unfortunately. I've seen some wild CSS for creating interesting shapes, but usually not worth it.
http://www.howtocreate.co.uk/tutorials/css/slopes
http://www.csstextwrap.com/
http://infimum.dk/HTML/slantinfo.html
http://tantek.com/CSS/Examples/polygons.html (shapes done with CSS)

I'm personally hoping SVG will catch on more. It's a great way to have graphics and they're scalable.
 
You can use the pseudo tags of :before and :after on a div. However you'll need an IE hack, but it's a fairly streamlined approach in my opinion.

Also, you can use background positioning, so only one image is used.
For example, this site : http://cwfaction.chicodev.com/announcements/agribusiness-ownership-transition/you-still-you.html, the left hand navigation is built from one image: http://cwfaction.chicodev.com/ui/images/public/layout/sidebar-bg.gif

Or you could use a combination of both 😱
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back