eBox: html/css box with imaged corners and gradient overlay

Posted on 06-03-2010, 00:08, by edo, under webdesign.

Creating a box with rounded corners using css always is quite a hassle, so i decided to figure it out properly once and for good. Using absolutely positioned elements you can create corners, and all elements between those corners. The tricky part is to let the border parts between the corners have a 100% width or height, but letting them not overlap with the corners, using a margin.

To be cross-browser friendly, it’s important to declare the doctype. IE7 will give wrong output if no doctype declared.

?View Code HTML
1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Check out the eBox that i made at http://www.edoxy.net/ebox/ebox.html. Download the pack, also for PSD’s on the imaged border and overlay gradient.

Be aware of the fact that the overlay covers the complete box, including the radius corners. If the box is not large enough, you will see the overlay at those corners. Make sure that the overlay is completely transparant at the top and at the bottom.

 |  Trackback