How do I get rounded corners on my box/DIV using CSS and no tables? Pages that link to <a href="" title="Pages that link to How do I get rounded corners on my box/DIV using CSS and no tables?" rel="nofollow" >How do I get rounded corners on my box/DIV using CSS and no tables?\

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:

BoxLib v1.0.20030701

Relevant links:

Rounded corners in CSS

W3C CSS tips & tricks : Rounded corners and shadowed boxes

Bullet-Proof Rounded Corners - an impressive solution

Rounding Tab Corners - an great variation on the theme from Eric Meyer and (as always) a very nice expalantion.

Rounded corners - comments on the above tehnique from Mark Pilgrim (a leading accessibility expert).

Doug's easyCorners - a nicely simple solution.

Rounded corners with CSS

Rounded Box for CSS Compliant Browsers

Corners - Nested divs revisited - demonstrates various CSS and JavaScript solutions.

Absolutely Buggy II: Absolute boxes inside relative boxes - demonstrates the theory and problems with one method

Stretchable Graphical Borders Or, how to have fun with Cascading Style Sheets

CSS Layout: Liquid Box with Rounded Corners

Redesigning with CSS Rounded Corners

BoxLib - a JavaScript solution from Scott Schiller

"The ThrashBox" – Rounded Corners for All - Simple, Semantically Correct CSS Boxen with Clean Code

CSS Design: Creating Custom Corners & Borders - good tutorial from ALA on this.


(Added by: Emperor on Thu 03-Jul-2003)

(Edited by: Emperor on Mon 22-Sep-2003)

(Edited by: Lacuna on Thu 20-Nov-2003)

(Edited by: Emperor on Fri 05-Dec-2003)
(Edited by poi on 01-25-2005 03:36)

« BackwardsOnwards »

Show Forum Drop Down Menu