Resizable box with freely stylable corners and surface

All these boxes resize with the text or any other content that's contained in them.

Depending on the extent of resizability you want to offer, background graphics have to be larger or smaller.

Here are just three examples but you can give both the corners and the surface any shape and texture you like since all of the box area is styled by gif-graphics. See sample graphics of this box: graphic 1, graphic 2, graphic 3, graphic 4

Inspired by Douglas Bowman's ALA article “Sliding Doors of CSS” as well as by redmelon's “Rounded Corners”.

Tutorial

There is a tutorial for this technique (in German) at:
www.andreas-kalt.de/webdesign/tutorials/runde_ecken.htm

More resources

On the main section of my (German-language) site there are more tutorials, over 100 webdesign-related links and reviews of webdesign books.

 

SuccessfullyTested in the following browsers:

  • Win: IE 6, IE 5.5, IE 5.01, Opera 7.11 & 7.2, Opera 6.06, NN 6.2, NN 7.02, Firebird 0.6.1, Mozilla 1.3.1.
  • SuSe Linux: Galeon 1.2.5, Konqueror 3.0.4, Opera 7.11, Mozilla 1.0.1
  • Mandrake Linux: Galeon 1.2.5, Mozilla 1.1 (Thanks to Thorsten Wisser for supplying the Linux results).
  • Mac (OSX 10.2): IE 5.2.x, Safari 1.x, Firebird 0.7 (Thanks to Jens Grochtdreis and Erika for supplying the Mac results)
  • FreeBSD 5.2.1: Mozilla 1.6 (Thanks to Andrew Morritt for this)

Known Problems:

  • It seems that if the content, e.g. the <p>-Tags, has margin-bottom applied and at the same time the innermost div (here: .roundbox-content) has padding-bottom applied then IE 5+ and Opera 7.11 will display part of the background-image underneath the box (Screenshot, thanks to Thorsten Wisser). This can be solved by setting either of the two properties to zero.

If you'd like to test this technique in any other browsers and on other platforms, please let me know the results.

 

relevant CSS (examplary for first box on the page)

.roundbox-tr { width:90%; margin:auto; padding:0; background:url("../gifs/roundbox_tr.gif") no-repeat right top; }

.roundbox-tl { margin:0; padding:0; background: url("../gifs/roundbox_tl.gif") no-repeat left top; }

.roundbox-br { margin:0; padding:0; background: url("../gifs/roundbox_br.gif") no-repeat right bottom; }

.roundbox-bl { margin:0; padding:0; background: url("../gifs/roundbox_bl.gif") no-repeat left bottom; }

.roundbox-content { margin:0; padding:2.5em 3.5em; }

.roundbox-content p { margin:0; padding:0; line-height:1.6; }

 

Home (Webdesign section)