Two Flexible Ways to Create Great Rounded Corner Boxes
Here are two flexible rounded corner box solutions that will work for a variety of different situations and HTML, CSS, and Photoshop skill levels.
For skilled photoshop users, rounded corner box tutorial #1 can be customized quickly in photoshop and requires very little HTML or CSS knowledge and produces a great web 2.0 look.
For skilled HTML and CSS users, rounded corner box tutorial #2 can use different colors easily just by changing the background colors in CSS. It too produces very nice looking boxes
Rounded Corner Boxes #1
Setup
The demo site has a downloadable zip file that contains PSD files as well as PNG and GIF files that will act as background images to produce rounded corner boxes. It also contains CSS files that you will need to upload to your website. The demo page contains an example of the HTML you will use to create the boxes.
Result
Default Box Size
For this example I used the default blue 800×1600 box.
Smaller Box Size
For this example I used the default blue 800×1600 box and I added an inline style to the dialog DIV (style=”width:500px;”). The box corners automatically adjust to the new size.
The more content you put in the box, the better it looks because the bottom gradient colors get closer to the middle gradient. As you can see in the box above, there is a distinct color line where the bottom of the text and the footer area meet. This box is tall enough to have a smooth gradient with no visible gradient line. This is one of the drawbacks to this technique.
Another drawback is that to use any colors besides the default color, you must create your own PNG files in photoshop. This isn’t a big deal if you own photoshop and know how to do this though.
Overall, if you’re looking for a technique to produce great looking web 2.0 looking rounded corner boxes, this is definitely the technique you want to use. It works right out of the box with the graphic files, css, and HTML provided at the download site. If you have photoshop or another graphics program that can produce PNG files then you can easily create colors that will work on your website.
I used all of the default HTML and CSS presented by the author. The only change I made was the inline style used on box #2 to decrease the width
Rounded Corner Boxes #2
Setup
This site has 2 files that are needed to produce rounded corner boxes. One will round the top corners and the other will round the bottom corners. It also explains the CSS to be used that will produce the rounded corner boxes.
Result
For this example I used the default image size which results in a box that is 250 pixels wide. I like this technique for smaller boxes.
This technique also lets you quickly change colors because you don’t need to create a new graphic – you’re changing the HTML background colors rather than the colors in the graphic. The graphic is made up of a simple GIF that has a transparent background with white rounded corners. You’ll want to change the white color to match whatever background color you use on your website.
To change the box color I simply changed the CSS class that defined the background color for the DIV container and the header. This technique allows you to quickly change colors however if you need varying width boxes then you need to create a new photoshop background GIF. This technique also requires a bit more knowledge of CSS since you have to place the top box on one element and the bottom box on another element.
I used my own HTML and slight modifications to the HTML and CSS presented by the author. The author uses a definition list in his example, which isn’t really too practical for many situations. With a bit of CSS and HTML knowledge, I easily changed the HTML to work within DIV elements. Below is my code to produce the results
HTML
<div class=”mountain”>
<div class=”mountainheader”>Box Color #1</div>
<p>For this example I used the default image size which results in a box that is 250 pixels wide. I like this technique for smaller boxes.</p>
<p>This technique also lets you quickly change colors because you don’t need to create a new graphic – you’re changing the HTML background colors rather than the colors in the graphic. The graphic is made up of a simple GIF that has a <a href=”http://www.psdmaster.com/text-effects/gif-with-transparent-background” target=”_blank”>transparent background</a> with white rounded corners. You’ll want to change the white color to match whatever background color you use on your website.</p>
</div>
<div class=”mountain2″>
<div class=”mountainheader2″>Box Color #2</div>
<p>To change the box color I simply changed the CSS class that defined the background color for the DIV container and the header. This technique allows you to quickly change colors however if you need varying width boxes then you need to create a new photoshop background GIF. This technique also requires a bit more knowledge of CSS since you have to place the top box on one element and the bottom box on another element.</p>
</div>
CSS
.mountainheader, .mountainheader2 {
margin: 0;
padding: 10px;}
.mountain {
background: #0099FF url(/wp-content/themes/psdmaster/images/box_bottom_250.gif) no-repeat bottom left;
width: 250px;
margin: 0 0 20px 20px;
color: #fff;}
.mountainheader {
background: #0000CC url(/wp-content/themes/psdmaster/images/box_top_250.gif) no-repeat top left;
text-align: center;
font-size: 18px;}
.mountain2 {
background: #CCFFCC url(/wp-content/themes/psdmaster/images/box_bottom_250.gif) no-repeat bottom left;
width: 250px;
margin: 0 0 20px 20px;
color: #000;}
.mountainheader2 {
background: #336600 url(/wp-content/themes/psdmaster/images/box_top_250.gif) no-repeat top left;
text-align:center;
font-size:18px;
border-bottom: #fff solid 1px;
color:#fff;}
.mountain p, .mountain2 p {margin: 0; padding: 5px;}