Rounded CSS Boxes
You can find many tutorials about rounded corners in HTML and CSS, but creating all the graphics and the markup per hand is very time consuming. There are rounded corner generators, but every website I have found, used boxes that do not scale well or need special markup which make them inflexible. This script simplifies rounded corner creation and produces boxes which scale perfectly and blend smoothly to the background color.
The idea for this technique was inspired by A List Apart and has been succesfully tested with Firefox (2+3), Internet Explorer (IE 5, IE 5.5, IE 6, IE 7), Konqueror and Opera.
Create your own Corners
To create your corners you have to define some variables like colors and line width. They are explained in the graphic below. For each corner, you can use a different background color and radius. If you use a zero-radius, a sharp corner will be drawn. Radii cannot be larger than 32 pixels (to decrease server load).
A Preview of your Rounded Corners
This preview shows a box with example content. After copying it to your website, you can fill the box with anything you want. Text, tables, images, forms, ... Do you see how smooth it blends with the background? Resize your browser window or font-size to see how the box can scale.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Looks Good? Then copy the code...
Paste the CSS into your style sheet.
.my_corners_tl, .my_corners_t, .my_corners_tr, .my_corners_l, .my_corners_r, .my_corners_bl, .my_corners_b, .my_corners_br, .my_corners {
width: auto;
margin: 0;
padding: 0;
border: 0;
position: relative;
}
.my_corners_t {
/*
change this div to layout the whole box (width, height, float, margin, ...)
example lines:
width: 60%;
margin: 7px 35px 0px 1px
to change distance to content/text scroll to class ".my_corners" and change the padding
*/
background-color: #dddddd;
background-image: url("my_corners_border.png");
background-repeat: repeat-x;
background-position: top;
}
.my_corners_tl {
height: 100%;
background-image: url("my_corners_topleft.png");
background-repeat: no-repeat;
background-position: left top;
}
.my_corners_tr {
height: 100%;
background-image: url("my_corners_topright.png");
background-repeat: no-repeat;
background-position: right top;
}
.my_corners_bl {
height: 100%;
background-image: url("my_corners_bottomleft.png");
background-repeat: no-repeat;
background-position: left bottom;
}
.my_corners_br {
height: 100%;
background-image: url("my_corners_bottomright.png");
background-repeat: no-repeat;
background-position: right bottom;
}
.my_corners {
height: 100%;
/* change this if you want to change the distance distance to text/content */
padding: 16px 17px 16px 17px;
}
.my_corners_l {
height: 100%;
background-image: url("my_corners_border.png");
background-repeat: repeat-y;
background-position: left;
}
.my_corners_r {
height: 100%;
background-image: url("my_corners_border.png");
background-repeat: repeat-y;
background-position: right;
}
.my_corners_b {
height: 100%;
background-image: url("my_corners_border.png");
background-repeat: repeat-x;
background-position: bottom;
}
Paste the markup into your HTML-files and replace the "Lorem ipsum..." with anything you like.
<div class="my_corners_l">
<div class="my_corners_r">
<div class="my_corners_b">
<div class="my_corners_tl">
<div class="my_corners_tr">
<div class="my_corners_bl">
<div class="my_corners_br">
<div class="my_corners">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div></div></div></div></div></div></div></div></div>
<!-- powered by http://mierendo.com/software/rounded_css_boxes/ -->
...and download the Images
Right-click on the images below and save them.
 | my_corners_border.png |
 | my_corners_topleft.png |
 | my_corners_topright.png |
 | my_corners_bottomleft.png |
 | my_corners_bottomright.png |
Directory Structure
A simple directory structure with HTML, CSS and image files is shown in the graphic. It is also possible to use your own directory structure and to change the filenames, but do not forget to update the paths in the CSS-file which may be wrong after renaming the images.
What is behind the generator?
The generator is powered by a slightly modified version of my antialiased arcs script.