Such as the edges around the element of this post, it may be desirable for a website designer to create an element with the same effect with rounded edges all around. This is easy in an element that has a fixed height: one background image for the entire element. It becomes a little more difficult when you don’t know the height of the element though.

The problem is that a background image in CSS2 cannot be stretched and you can’t use two backgrounds for the same element. So to work around this problem we will use two elements. The first DIV will have a bottom padding of 10px. The second DIV will have a top padding of 10px. This will leave room for the two background images we will place in each element. One positioned at the top of the element and the other positioned at the bottom of the element.

The HTML code

<div class="content1">
     <div class="content2">
 
          Page content here
 
     </div>
</div>

The CSS code

.content1 {
	padding: 0 0 10px;
	background: #323131 url('/images/corners-bot.png') no-repeat 0% 100%;
        width: 610px;
}
 
.content2 {
	padding: 10px 0 0;
	background: #323131 url('/images/corners-top.png') no-repeat 0% 0%;
}

I used the CLASS attribute for this example because these elements appear more than once on our blog index page. If the code is guaranteed to be used only once it is recommended to use the ID attribute.

The background line of code is broken down into:

• #323131: the background color of the element
• url(‘/images/corners-top.png’): the URL of the first image we create for the top corners
• no-repeat: specifies that the image will not be tiled
• 0%: the starting position of the background image on the x-axis (left-right)
• 0%: the starting position of the background image on the y-axis (up-down)

Using 0% 100% on the second element background line will position the background at the very bottom of the element.



The only thing left is to create the image. I used Photoshop and it is a fairly straight-forward process.

The Photoshop steps

1. Create a new document 15 pixels high and the width of your element wide. In our example, it would be 610px.
   
   
2. Select the rounded rectangle tool
   
   
   
   
   
   
   
3. Set the radius for the tool to 8px
   
   
   
   
4. Draw a rounded rectangle that starts at the bottom edge of the image and extends far beyond the top of the image.
   
   
   
   
5. Right click on the image and select “Make selection”. Use the default of 0px.
   
   
   
   
6. Click on Select then Inverse. This should create a selection that will be our bottom corners.
   
   
   
   
7. With the primary color block set to your pages background, fill the selection with CMD+DEL (ALT+BACKSPACE on PC).
   
   

You can go through the same steps for the top corners. Alternatively, you could press CMD+T (ALT+T on PC), right click and select “Flip Vertical” and move it into position.