This post is about a technique that I use quite often over at Chemistry.com whenever someone from our Product department comes over and provides me with a comp that contains rounded corners in the Design.
It’s really efficient and although this is a pretty verbose post, once you choose your “type” of rounded corner, you can literally have your rounded corner and content ready and out the door within 15 mins. This technique utilizes the Rounded Cornr” Generator found on www.roundedcornr.com.
It is a pure CSS approach and the images for the rounded corners are even provided to you via the generator. Here is a link to the original Word Document if you want to download the word version. Otherwise, enjoy.
Rounded Corners Made Easy A Step-By-Step Guide
If you want :
Rounded corners with a border using Solid Web Safe Colors
Note: The width of the box should not be stretched to more than 1024 pixels using this option, and the height of the content should not be stretched to more than 600 pixels so to fix the width go to step 4.
This option creates images as png’s if you want gif’s take the images after they’re created and simply open up your favorite image editing program and save them as gifs. Make the necessary changes in your css to reference the gif images.
1. Simply visit www.roundedcornr.com and choose the “RoundedCornr with Border” option. Fill in the required attributes and it will spit out the HTML, CSS, and Images for your rounded corners just as you like.
2. Replace the <p> tag with a <div> tag just in case you need to create a layout with the rounded corner box.
3. Change this css declaration block:
.roundedcornr_content, .roundedcornr_bottom {
margin-top: -19px;
NOW BECOMES
.roundedcornr_content, .roundedcornr_bottom {
margin-top: 0px;
4. Create a wrapper class (and a hack for IE 6 and earlier) and set the width:
.wrapper {
overflow:auto;
width:700px;
}
* html .wrapper {
height:100%;
}
5. Be sure to put the wrapper div around the rounded corner divs. Your HTML should now look like the sample HTML below, just remember the width of the box can be no longer than 1024pixels or similar if you’re using % or ems for your wapper class instead of pixels. In this example I set the width to 700 pixels as you can see in the above CSS.
<div class=”wrapper”>
<div class=”roundedcornr_box”>
<div class=”roundedcornr_top”><div></div></div>
<div class=”roundedcornr_content”>
<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 class=”roundedcornr_bottom”><div></div></div>
</div>
</div>
6. You’re done.
If you want :
Rounded corners using Gradient Web Safe Colors with or without a border
Note: The width of the box has no limitations with this option, unlike the Basic Rounded Corner with Borders options listed above. Here the width of the box can be as wide as you need it to be.
1. First you will need to know the bottom color of the gradient fill which you need to use. For example in my gradient for this exercise, I want it to go from white to #ebd0cc(which is a pinkish color)
2. Simply visit www.roundedcornr.com and choose the “RoundedCornr with Gradient” option. Fill in the required attributes and it will spit out the HTML, CSS, and Images for your rounded corners just as you like.
Note: For the most part, when you’re creating gradients you’ll want the the “Background color” attribute to be white or #FFFFFF and the “Box color at top” attribute to be white or #FFFFFF since a gradient usually starts out as white, and color fills in as the content grows within the box.
The “Box color at bottom” attribute is usually the gradient color fill that you’re shooting for so as mentioned earlier in this example my color is #ebd0cc (pinkish).
Now the “gradient height in pixels” attribute is important because it determines when the gradient color starts to come in. The basic principle behind this is the lower the number, the quicker the gradient begins to fill the box as content is placed in it versus the higher the number the more content you have the add to get the color to start appearing. The default here of 60 is a good place to start.
without a border
3. Once you’ve made your selections, roundedcrnr spits out your HTML, CSS, and Images. Save EVERYTHING IF you’re not wanting borders around your rounded corner box. Go to step 4.
with a border
If you want a border, you ONLY need to save the HTML, CSS, and ONE image. The ONLY image you want to save here is the grad.gif image. Save these three items to your local environment. Later we’ll have to go back and choose the “RoundedCornr with Border” option to get our other four border images. (if you save all the images here then it’s ok, b/c we’ll overwrite them later)
4. We’ll now need to introduce/add four new classes to our CSS. These classes help set the width of the box and the border colors. (if you don’t want borders then leave off the .wrappertop and .wrapperbottom classes and ONLY add the .wrapper and * html .wrapper class and go to step 5) Here in this example, I’m setting the width to 471 pixels wide. You can use ems or percentages if you like. I’m also using a grayish color for my borders around the box, and giving myself some left and right margins for the text that will appear in my box. The width of .wrappertop and .wrapperbottom must be the same. The .wrapper must be 20px more than top and bottom as seen in the code below. Go to step 6.
.wrappertop {
border-bottom:1px solid #D3D3D3;
width:471px;
margin:0px 10px;
}
.wrapper {
overflow:auto;
width:491px;
}
/* Hack for IE 6 and lower */
* html .wrapper {
height:100%;
}
.wrapperbottom {
border-top:1px solid #D3D3D3;
width:471px;
margin:0px 10px;
}
5. If you’re not using borders, all you have to do is add the new wrapper class div to the HTML. Your HTML should now look like the HTML below. You’re done.
<div class=”wrapper”>
<div class=”roundedcornr_box”>
<div class=”roundedcornr_top”><div></div></div>
<div class=”roundedcornr_content”>
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.
</div>
<div class=”roundedcornr_bottom”><div></div></div>
</div>
</div>
</div>
6. Now it’s time to go back and choose the “RoundedCornr with Border” option to get our other four border images. Here we’ll be getting four of the five images that will be created. These images will help us build our border as well. Let’s go through the attributes:
Corner radius in pixels: should be the same as the corner radius you selected for the Rounded Corner with Gradient option.
Background Color: For the most part, when you’re creating gradients you’ll want the the “Background color” attribute to be white or #FFFFFF.
Box color: This should be the same color as “Box color at bottom” chosen when you were filling in the “Rounded Crnr with Gradient” option earlier. For example my color was #ebd0cc which is a pinkish color. So I’ll choose that same color here. This very important in relation to the corner images that we’re about to create.
Border Color:This will need to match the border attributes in the above css classes (wrappertop and wrapper bottom specifically) or simply the border color you want. But they will need to match the classes border color or vice verca.
Border width in pixels: This will need to match the border attributes in the above css classes (wrappertop and wrapper bottom specifically). Most of the time it will be 1 unless you want a thicker border.
Margin in pixels: ( set it to 0 and read on)
Note: Be sure to add these 4 additional declaration blocks to the class .roundedcornr_content (this also helps assist us in building our border around the box) . The margin must change to the way it is below (you basically get rid of the original 10px of margin on the right and left). Use the padding to set the left and right margin’s instead. so it now looks like this:
.roundedcornr_content {
margin:0;
padding: 0px 10px;
border-left:1px solid #D3D3D3;
border-right:1px solid #D3D3D3;
}
Margin in pixels: I’m sure it can be used, but I leave it at its default of 0 as mentioned above.
7. Save ONLY TWO IMAGES HERE: br.png and bl.png. We are now going to open up our favorite image editing program and do a little cropping of these two images. We’ll also be changing these images from .png’s to gif’s. when saving them in our image editing program.
a. Open up br.png and blow it up. Move all the way to the bottom right and try to crop the bottom right part of the image somewhere around 10×10 pixels. Save it AS A GIF or if you saved all the images earlier then Overwrite br.gif.
b. Open up bl.png and blow it up. Move all the way to the left and try to crop the left half of the image somewhere around 10×10 pixels. Save it AS A GIF or if you saved all the images earlier then Overwrite bl.gif.
8. Remember when I was talking about Box color: above being the same color so your corner images would turn out right? Well we have to now go back to the “RoundedCornr with Border” option to get our other two border images for the top section. However, when we go back to this option, we’re only concerned with this attribute as we’re only trying to get two more images for the top section of our box. When you go back simply change this value from our pinkish color #edbd0cc to white or #ffffff for this attribute. The reason is b/c our top images need to be white not pink b/c the top of the gradient is white. Go ahead and hit the “Create RoundedCrnr >>” button. As you’ll see new HTML, CSS & Images are spit out as usual. However, we’re only concerned with the images(2 of them) created here.
9. Now you’ll want to save two more images here: tr.png. and tl.png. Just like above, we have some image cropping to do. However, tr.png won’t need to be cropped. It will only need to be saved out as a gif.
a. Open up tr.png and simply Save it AS A GIF, or if you saved all the images earlier then Overwriting tr.gif.
b. Open up tl.png and blow it up. Move all the way to the top left and try to crop the top left part of the image somewhere around 10×10 pixels. Save it AS A GIF or if you saved all the images earlier then Overwrite tl.gif.
10. Add the new wrapper class div to the HTML. Your HTML should now look like the HTML below. You’re done.
YOU’RE DONE BUT BE SURE THAT CLASSES ARE REFERENCING THE CORRECT IMAGES. EACH TIME YOU CREATED IMAGES HERE YOU HAD DIFFERENT NUMBERS I.E. _403228. THESE MAY BE DIFFERENT SO MATCH THEM UP.
<div class=”wrappertop”> </div>
<div class=”wrapper”>
<div class=”roundedcornr_box_737319″>
<div class=”roundedcornr_top_737319″><div></div></div>
<div class=”roundedcornr_content_737319″>
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.
</div>
<div class=”roundedcornr_bottom_737319″><div></div></div>
</div>
</div>
</div>
<div class=”wrapperbottom”> </div>
If you want :
Rounded corners without a border using Solid Web Safe Colors
Note: The width of the box has no limitations with this option, unlike the Basic Rounded Corner with Borders options listed above. Here the width of the box can be as wide as you need it to be.
1. Simply visit www.roundedcornr.com and choose the “Basic Rounded Cornr” option. Fill in the required attributes and it will spit out the HTML, CSS, and Images for your rounded corners just as you like.
2. The only thing we need to do here is simply add a wrapper class to control the width of the box and then add the wrapper div to the html. HTML and CSS example below: You’re Done.
/* CSS Document */
.roundedcornr_box_734614 {
background: #cccccc;
}
.roundedcornr_top_734614 div {
background: url(roundedcornr_734614_tl.png) no-repeat top left;
}
.roundedcornr_top_734614 {
background: url(roundedcornr_734614_tr.png) no-repeat top right;
}
.roundedcornr_bottom_734614 div {
background: url(roundedcornr_734614_bl.png) no-repeat bottom left;
}
.roundedcornr_bottom_734614 {
background: url(roundedcornr_734614_br.png) no-repeat bottom right;
}
.roundedcornr_top_734614 div, .roundedcornr_top_734614,
.roundedcornr_bottom_734614 div, .roundedcornr_bottom_734614 {
width: 100%;
height: 10px;
font-size: 1px;
}
.roundedcornr_content_734614 { margin: 0 10px; }
.wrapper {
overflow:auto;
width:300px;
}
* html .wrapper {
height:100%;
}
<div class=”wrapper”>
<div class=”roundedcornr_box_734614″>
<div class=”roundedcornr_top_734614″><div></div></div>
<div class=”roundedcornr_content_734614″>
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.
</div>
<div class=”roundedcornr_bottom_734614″><div></div></div>
</div>
</div>