Rounded Corner Boxes With Expandable Heights Using CSS and Images

Jun
9

18 Comments - LEAVE A COMMENT

Rounded corners are a great design element to escape from the blocky/boxiness a lot of web designers fall victim to. I remember the first time I created my own rounded corner box using Photoshop and HTML/CSS. What a thrill :) A lot of people shy away from it because it SEEMS a lot more difficult than it really is.

I’m going to show two ways to create this effect using Photoshop (or the graphic editor of your choice) and HTML/CSS. There are other ways to create this effect using just CSS – but I really am not a big fan of it because it creates a lot more empty divs than this method. Yes if images are off you will lose this effect – but I’m willing to sacrifice that.

Like I said I’m going to demonstrate two ways to accomplish this. The first is using just a flat rounded corner image with no other effects. The second will have a box with a drop shadow, border and gradient. :) So let’s start easy!

First open up Photoshop, and create a new document with a size of 200x200px.

For this example you don’t really need to have a background color (ie: you can use a transparent gif), but for the sake of this example I’m going to use a white background fill.

Next, select your rounded rectangle tool and draw the shape out to fill most of the box. My shape radius option is set to just 5px, but you can choose whichever best fits for your design. The concept is the same no matter how rounded your corners are.

I’ve chosen one of my favorite colors for the shape’s fill – #ff008a – a nice bright magenty-pink :)

Now, hold down CTRL while clicking on your shape layer. Your shape should now be selected:

Select the shape

Now that you have the whole shape selected let’s remove any excess background you might have. From the top menu choose “Image” and then choose “Crop”. This will take your image down to just the shape. You will see a tiny bit of the background peeking from the corners where it rounds.

Cropped Shape

Make sure your shape is still selected (CTRL + CLICK shape layer). Now, choose the Rectangular Marquee Tool (keyboard: M). Now, while holding down the ALT key* (while holding ALT and using the rectangular marquee tool parts of your selection that are already selected will be deselected) select right after the TOP rounded corners end deselect the bottom half. It may be helpful if you zoom in a bit.

Here is what your selection should look like:

Top selection

Great, now crop that image the same way we did to the original shape – find “Image” on the top menu, and then select “Crop” from its dropdown.

There you have it. All we need to make our rounded corner box! I’ll explain:

First, CTRL + ALT + SHIFT + S to “Save for Web…”. Save your image as top.gif.

Now, press CTRL + SHIFT + E to flatten your image. You will be left with one layer. Next press CTRL + T to transform.

***TIP*** if your final layer is “locked” double click the lock next to the layer name and when the dialog pops up called “New Layer” press ok, THEN press CTRL + T.

Right click on your image and from the drop down select “Flip Vertical”. This will give you the bottom to your box. CTRL + SHIFT + ALT + S to save, naming it bottom.gif.

Great. Now that we have our images we can start the code.

Our HTML will look like this (I’m using divs for this example, but theoretically this can be applied to most if not all block level elements).

<div class="wrap">
<div class="mybox">
	<p>My box text ;)<br />
	This is my rounded box, isn't it so cool!
	I love my rounded corner box, it's SO pretty!
	And it's expands it's height to 
        fit in as much text as I want to throw in it! 
	How awesome!</p>
</div>
<div class="endbox"></div>
</div>

**NOTE** : The “wrap” class is really for demo purposes. Because I am using floats for this example unless the parent element has a width the bottom of the box will float next to it. You won’t need to wrap each rounded box in this if you have them in a sidebar/part of your page of some sort with a set width close the the width of your box.

If you want to remove the wrap class and have the same effect in an area with no container width switch the “float:left” in “mybox” and “endbox” to “display:block;”. I recommend using floats contained within a set width parent though to prevent compatibility issues!

That’s it for the HTML, now the CSS. You will need to know several things before starting –

1) The WIDTH and HEIGHT of your rounded corner images AFTER cropping. If you are not sure open the file up in Photoshop and right click the title bar of the image and select “Image Size” and you will see the dimensions. You can also open up the folder where you have saved the image and hover over the image and the popup in Windows will show you the width/height.
2) The location of your image.

.wrap {
	width:200px;
	float:left;
	}
  
.mybox {
	float:left;
	padding:10px;
	 /*Your width is 190px minus 20px for your left and right padding totally to 170px*/
	width:170px;
	/*the url to your top rounded corner image*/
	background:#ff008a url(top.gif) no-repeat; 
	font:12px 'trebuchet ms', arial, verdana, sans-serif;
	color:#fff;
	}
	
.endbox {
	float:left;
	width:190px;
	height:6px;
	/*url to the bottom rounded corner*/
	background:transparent url(bottom.gif) no-repeat; 
	}

Great, that’s IT! Like I said before the “wrap” class is necessary only if you aren’t putting this within another div that doesn’t have a width set. This works cross browser FF, IE6/IE7, Safari and Opera.

See Rounded Box Using CSS

Now ;) For the “harder” method. It’s actually not much harder. You will need three images instead of two – but it’s the same principle.

I’ll quickly explain how to make our image in Photoshop. First, start just like our previous image create a new image at a size of 200x200px. This time though be careful to make your rounded rectangle shape slightly smaller then the previous version – remember you will need to leave enough space around the image for your surrounding shadow. If you find later on that you’ve run out of space for your shadow then right click the title bar and from the drop down select “Canvas Size”. Add space to the height and width as needed to fit in your shadowing.

Ok, next step is to make our box a little prettier – double click the shape layer to bring up the layer styles dialog. First add a border. For this example I placed a border of 2px, color:#035873 and opacity of 39%. Next let’s add a gradient that repeats down the length of the box.

These are the following options for your gradient:

Gradient

Finally, lets add our shadow. First CTRL + Click the shape layer to select it. Next, create a new layer (CTRL + SHIFT + N). Move this layer BELOW the shape layer. Make sure your selection is still intact. If not CTRL + Click the shape layer to reselect.

Now, make sure your on the new layer you have created. Fill with black. The next step depends on how much shadow you want. But here is what I did: on the top menu click on the “Filter” menu and from the drop down select the “Blur” option, from that slideout choose “Gaussian Blur…” finally on the window that pops up put in a radius of 4.3.

You should now have a rounded box that looks like this:

Rounded corner with shadow

Now, for cutting out the slices for this box you will have to select outside of the main rounded box area. For this the best option is to use the rectangular marquee tool (keyboard: M).

Select the top part of your box and make sure your selection is large enough that it goes just slightly beyond your shadow. If you cut too close your shadow will cut off abruptly and you will lose the whole effect.

So your first selection should look like this:

Selection One

See how my selection reaches outside of the shadow? This is very important. Next, go to “Image” on the top menu and then select “Crop”. Save this image.

Next, press CTRL + ALT + Z to take a step back to before you cropped. Make sure your Rectangular Marquee Tool is still selected. Now hold down SHIFT and press the down arrow to move your selection all the way to the bottom. (Let go of SHIFT if the selection goes to far and adjust up/down as needed).

Selections Two

Repeat the steps to crop, save and take a step back (CTRL + ALT + Z).

Grab your “Single Row Marquee Tool” (click the Rectangular Marquee Tool so the slideout pops out and scroll down to the 3rd tool). Just click anywhere in the middle of your box. You see a single 1px high selection for the width of your box.

Selection three

Now repeat the Crop and Save.

Great! Now you have the three images you will need to complete this effect. Now it’s time for the HTML:

<div class="wrap">
<div class="top"></div>
<div class="box">
	<p>My box text ;)<br />
	This is my rounded box, isn't it so cool!
	I love my rounded corner box, it's SO pretty!
	And it's expands it's height to fit in as much text as I want to throw in it! 
	How awesome!</p>
</div>
<div class="bottom"></div>
</div>

Again, the wrap isn’t needed if you have it placed within another div in a sidebar-like situation.

And the CSS:

.wrap {
	width:200px;
	float:left;
	}
	
.top, .bottom {
	float:left;
	width:200px;
	height:23px;
	/*url to the bottom rounded corner*/
	background:transparent url(rounded-shadow-btm.gif) no-repeat; 
	}
	
.top {
	/*url to the top rounded corner*/
	background:transparent url(rounded-shadow-top.gif) no-repeat 
	}
  
.box {
	float:left;
	padding:15px;
	/*Your width is 200px minus 20px for your left and right padding totally to 180px*/
	width:170px;
	/*the url to your text background*/
	background:transparent url(rounded-shadow-bg.gif) repeat-y; 
	font:12px 'trebuchet ms', arial, verdana, sans-serif;
	color:#fff;
	}
	

Works in all browsers!

See Rounded Box With Shadows Using CSS & Images

And there you have it. Two simple ways to have rounded corners using images and CSS!

***TIP*** – For my examples I am NOT using a CSS reset method. So your results may vary. If this is the case (and usually it is with IE6 – big surprise!) you will have to adjust the margins and/or paddings. I’m not going to tell you how to solve this problem should you run into it, because solving your own problems is 99% of how you learn CSS and get your experience. But you now have the general principles and should be easily able to integrate this!

And if you can’t, post any questions in the comments or email me and I will try my best to help you out.

Jump to Comments

18 Responses to Rounded Corner Boxes With Expandable Heights Using CSS and Images

  1. A u d e e says:

    Wonderful tutorial. Totally briliant! Thank you for sharing this….will subscribe to your blog for next update ;) Keep up the good work Girl :D

  2. Lindsey says:

    Thank you, glad you enjoyed and hope it helped you out!

  3. k03rnia says:

    Wow, now i understand…thanks!

  4. jeannie says:

    wow. worked on the first try. that was pretty exciting. applied minimal tweaking to fit my design. thanks so much!

    here’s my usage:
    http://www.thatsmeproductions.com/kronke/shop/hazelnuts/roasted-hazelnuts.php

    (to be migrated to http://www.kronkeranch.com)

  5. Lindsey says:

    I’m so glad it work for you! Looks great!

  6. Rounded Corner Boxes With Expandable Heights Using CSS and Images…

    Iím going to show two ways to create this effect using Photoshop (or the graphic editor of your choice) and HTML/CSS. There are other ways to create this effect using just CSS – but I really am not a big fan of it because it creates a lot more empty …

  7. Kate says:

    thanks, you made this really easy for a beginner!

  8. I have to say, that I could not agree with you in 100%, but that’s just my opinion, which could be wrong.
    p.s. You have a very good template for your blog. Where did you find it?

  9. [...] Rounded Corner Boxes With Expandable Heights Using CSS and Images [...]

  10. Serkan says:

    I love this tutorial. Thank you for sharing this. Greetings from TURKEY.

  11. The instructions are great, any chance you could show what the final box looks like using the first method? (It’s pretty easy to see what you’ll get in the second method.)

    Also, what about top to bottom gradients, or partial gradients that start at the top of the box?

    Thanks a ton!

  12. Sumit says:

    its a nice post but i want to create rounded shape without image. is it possbile

  13. Amazing, excellent information. This blog is really awesome. I bookmarked it and will return again.

  14. Larry says:

    This is really a bad approach as the size of your shadowed box is hard-wired. (Your definitions of “top” and “bottom” have a fixed with.)

  15. Lindsey says:

    Actually there is nothing wrong with using a fixed width for any content. I’m not sure how you equate using fixed width (something you will find on EVERY single website for at least one portion of the site) as a “bad approach”. I’m not sure what you have been reading, but you have misunderstood, liquid/fluid LAYOUTS are great, but there are parts of every site big, small, pretty and ugly that all have an area (and usually many areas) that need a fix width). Also, note it is fixed in width, not in height and it will expand easily to fill in the content if it is larger or smaller than originally designed for.

    And, not for nothing, I wrote this article in mid 2008, close to 3 years ago when CSS3 wasn’t supported much, and this was a method that was easy, valid and consistent cross browser. Now, with the advancement of CSS3 we can use cool new features (that most current browsers support) like border-radius (for rounding) and box-shadow for the drop shadow.

  16. Brent says:

    luv the site!

  17. steven.g says:

    Thanks for the how-to. I had to use this and the IE exclusion command to get rounded corner boxes with inset shadows to work in IE 8 and below.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>