Little Boxes. Examples - In search of the One True Layout. You'd probably feel cheated if I didn't roll out some more examples that give an idea of how these techniques could be put into action. So without further ado: [1] Interactive Demo Add columns! Switch the order around! You call the shots. Nested Rounded Corners A pixel-based fixed width layout that shows just how crazy you can go repeatedly nesting the combined technique within itself.
Not only is this a layout that would be impossible to achieve with a table-based layout [2], but the source ordering is a joy compared to how you'd have to do it [3] Of course, this version is somewhat overladen with hacks and additional markup. Boxes A scalable em-based layout which is unremarkable other than the fact that it raises yet more questions about Opera's positional abilities, and that it would be nigh on impossible to achieve with Faux Columns.
Borders with backgrounds A liquid percentage-based layout that is utterly unremarkable. Results for these examples can be found in Appendix C. BBC home page. Css Zen Garden: The Beauty in CSS Design. CSS examples. CSS Rounded Corners 'Roundup' 4Google + Note: This post is continually updated as I come across new techniques. This collection of techniques to create boxes with rounded corners using CSS has become quite popular. The problem now is there are so many choices it's hard to know which one to choose. To that end I've provided some more information about each method in order to help people choose which best fits their needs. Some of these techniques use CSS and one or more background images, some use CSS, JavaScript and no images, and a couple use only CSS — no images or JavaScript required (more markup is needed though). Not Sure Which One to Use? There are so many different techniques now, it really depends on your individual requirements and preferences; particularly whether you want to use a JavaScript-based technique or not.
Try out a few methods and see if there's one that fits. Click on a column heading to sort the table by that column. CSS Only Methods.