OZONE Asylum
FAQ
How do I get rounded corners on my box/DIV using CSS and no tables?
This page's ID:
5743
Search
QuickChanges
Forums
FAQ
Archives
Register
You are editing "How do I get rounded corners on my box/DIV using CSS and no tables?"
Who can edit an FAQ?
Anyone registered may edit an FAQ.
Your User Name:
Your Password:
Login Options:
Remember Me On This Computer
Your Text:
Insert Slimies »
Insert UBB Code »
Close
Last Tag
|
All Tags
UBB Help
One of the challenges to CSS-only designs are replicating some of our old favourites without using tables and chief amongst these is the box with rounded corners. It is a tricky one as a CSS-only solutions can get pretty complicated. However, there are also JavaScript solutions which solve this problem. See resources below: ---------------------------- Relevant threads: [url=http://www.ozoneasylum.com/Forum2/HTML/002236.html]BoxLib v1.0.20030701[/url] ---------------------------- Relevant links: [url=http://virtuelvis.com/gallery/css/rounded/]Rounded corners in CSS[/url] [url=http://www.w3.org/Style/Examples/007/roundshadow.html]W3C CSS tips & tricks : Rounded corners and shadowed boxes[/url] [url=http://www.albin.net/CSS/roundedCorners/]Bullet-Proof Rounded Corners[/url] - an impressive solution [url=http://www.complexspiral.com/publications/rounding-tabs/]Rounding Tab Corners[/url] - an great variation on the theme from Eric Meyer and (as always) a very nice expalantion. [url=http://diveintomark.org/archives/2002/08/05/rounded_corners.html]Rounded corners[/url] - comments on the above tehnique from Mark Pilgrim (a leading accessibility expert). [url=http://www.redmelon.net/tstme/4corners/]Doug's easyCorners[/url] - a nicely simple solution. [url=http://www.webweaver.org/dan/css/corners/]Rounded corners with CSS[/url] [url=http://mrclay.org/tests/rounded/]Rounded Box for CSS Compliant Browsers[/url] [url=http://www.fu2k.org/alex/css/test/Corners.mhtml]Corners - Nested divs revisited[/url] - demonstrates various CSS and JavaScript solutions. [url=http://www.positioniseverything.net/abs_relbugs.html]Absolutely Buggy II: Absolute boxes inside relative boxes[/url] - demonstrates the theory and problems with one method [url=http://threeplusone.com/code/shadow.html]Stretchable Graphical Borders Or, how to have fun with Cascading Style Sheets[/url] [url=http://www.guyfisher.com/builder/workshop/css/corners/]CSS Layout: Liquid Box with Rounded Corners[/url] [url=http://www.superflippy.net/temp/round/round_workaround.html]Redesigning with CSS Rounded Corners[/url] [url=http://www.schillmania.com/dev/boxlib]BoxLib[/url] - a JavaScript solution from Scott Schiller [url=http://www.vertexwerks.com/tests/sidebox/]"The ThrashBox" – Rounded Corners for All[/url] - Simple, Semantically Correct CSS Boxen with Clean Code [url=http://www.alistapart.com/articles/customcorners/]CSS Design: Creating Custom Corners & Borders[/url] - good tutorial from ALA on this. _____________________ [internallink=4626]Emperor[/internallink] [small][i](Added by: [url=http://www.ozoneasylum.com/cgi-bin/ubbmisc.cgi?action=getbio&UserName=Emperor]Emperor [/url] on Thu 03-Jul-2003)[/i][/small] [small][i](Edited by: [url=http://www.ozoneasylum.com/cgi-bin/ubbmisc.cgi?action=getbio&UserName=Emperor]Emperor [/url] on Mon 22-Sep-2003)[/i][/small] [small][i](Edited by: [url=http://www.ozoneasylum.com/cgi-bin/ubbmisc.cgi?action=getbio&UserName=Lacuna]Lacuna [/url] on Thu 20-Nov-2003)[/i][/small] [small][i](Edited by: [url=http://www.ozoneasylum.com/cgi-bin/ubbmisc.cgi?action=getbio&UserName=Emperor]Emperor [/url] on Fri 05-Dec-2003)[/i][/small] [small](Edited by [internallink=2185]poi[/internallink] on 01-25-2005 03:36)[/small]
Loading...
Options:
Enable Slimies
Enable Linkwords
« Backwards
—
Onwards »