CSS and Round Corners: Build Boxes with Curves Article

One of the main reasons why designers use images on a Web page is to create curves and round corners. It’s currently impossible to create any kind of curved shapes using pure HTML, so images need to be applied.

The problem? Putting these images into an HTML document with a table layout can create a large amount of superfluous code. In this tutorial, we’ll use CSS to create this box with round corners, without an <img> tag in sight!

How it Works

The above is basically a normal box that has an orange background colour, over which four corner images are superimposed. All these images have been called up through CSS commands. So, we start off with the following snippet:

<div class="bl">Lorem ipsum dolor sit amet consectetur adipisicing elit</div>

We’ve used class="bl" as we’re going to assign our bottom right corner to this <div> through a CSS command. As a rule, you can only assign one background image to an HTML tag using CSS, so this is the only image we’ll assign to this <div>.

We’ll use the above image, called bl.gif, which we’ll place in the bottom-left corner with the following CSS command:

.bl {background: url(bl.gif) 0 100% no-repeat; width: 20em}

The CSS background command is broken into three sections: the image URL, its position, and a repeat command. We also inserted a width CSS command so that the box doesn’t cover the whole of the screen. Let’s examine the three background commands in turn:

Image URL — Remember, the image is being called through the CSS, so the path to the image must be the path from the CSS document, not the HTML document.
Image Position — In this example, we’ve used the command 0 100% in our CSS rule. The first number represents the distance from the left edge of the <div> ; the second number identifies the distance from the top edge. In this instance % was used, but a different distance value, such as em or px, could just as easily have been used instead. If this command was left out, the default value, 0 0, would be used, and the image would be placed in the top-left corner.
Repeat Command — Obviously, we don’t want this image to repeat, so we insert the no-repeat CSS command. If we wanted to, we could have used repeat-x, to repeat the image horizontally, repeat-y, to repeat it vertically, and repeat to repeat it both horizontally and vertically. If this command was left out, the default value, repeat, would be used.

It doesn’t matter in which order these three CSS background commands are placed. Our box with curves now looks like this.

Bottom-Right Curve

Next, we’ll stick in that bottom-right curve. As previously mentioned, we can only assign one background image to each <div> in the CSS, so we’ll need to insert a new <div>:

<div class="bl"><div class="br">
Lorem ipsum dolor sit amet consectetur adipisicing elit
</div></div>

Here’s the image we’ll use:

Naming this bottom-right image br.gif, we’ll insert a new CSS rule:

.br {background: url(br.gif) 100% 100% no-repeat}

This CSS rule is essentially the same as the last one, although now we’ve changed the position from the left to 100%, where previously it was 0%. The box now looks like this.

Top Curves

To make our top curves, we’ll need two new images:

We’ll call these tl.gif and tr.gif. We’ll need to create two new <div>s for them:

<div class="bl"><div class="br"><div class="tl"><div class="tr">
Lorem ipsum dolor sit amet consectetur adipisicing elit
</div></div></div></div>

The new CSS rules are as follows:

.tl {background: url(tl.gif) 0 0 no-repeat}
.tr {background: url(tr.gif) 100% 0 no-repeat}

These give us this display.

Background Colour

We’ll now insert our orange background colour into the box, in order to achieve the whole round corners effects. The background colour must always be assigned to the very first CSS rule. This is because each CSS background rule is essentially a layer on top of the previous one. So, in this example, we have a layering order of br.gif, bl.gif, tl.gif and then tr.gif. But, in this example, the images don’t overlap, so we don’t really notice this layering effect. By default, a background colour covers the entire <div> and will layer on top of any other previously assigned background images and/or colours. Therefore, if we place the orange colour in any <div> other than the first, it will be placed on top of the preceding images and will essentially cause them to disappear. Therefore, we must place our orange background colour (#e68200) in the very first CSS rule:

.bl {background: url(bl.gif) 0 100% no-repeat #e68200; width: 20em}

As before, it doesn’t matter where we place this colour command within the CSS background rule. Our box now looks like this.

Padding

Padding is needed to prevent the text from overlapping on to the images, which are 10px x 10px in size. Therefore, we need 10px-worth of padding on the text. But to which <div> should we assign the padding CSS rule? Does it matter? Well, yes it does. Whichever element we assign padding to, each of the elements inside it will inherit that padding. If we were to assign padding to the very first <div>, <div class=""bl">

, we’d get this effect. To get this padding to work properly, we need to assign it to the very last <div>, <div class="bl">:

.tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px}

Here’s how it looks now.

Internet Explorer Issues

You may have noticed the bottom corners were called up before the top corners. If we were to do things the other way round, that is, call the top corners first, some parts of the orange background colour would sneak out under the bottom curves, causing a rather unsightly effect. Switch the order of the <div>s around and see for yourself. Another issue in Internet Explorer is that the background colour of the box sometimes overlaps on to the element below, again causing an unattractive effect. This can be solved simply by placing a tiny placeholder beneath the box with round corners. Immediately after the fourth closing </div>, insert the following HTML:

<div class="clear">&nbsp;</div>

Now, assign it this CSS rule:

.clear {font-size: 1px; height: 1px}

The Final Code

Our finished HTML now looks like this:

<div class="bl"><div class="br"><div class="tl"><div class="tr">
Lorem ipsum dolor sit amet consectetur adipisicing elit
</div></div></div></div>
<div class="clear">&nbsp;</div>

Here’s the CSS that makes it all happen:

.bl {background: url(bl.gif) 0 100% no-repeat #e68200; width: 20em}
.br {background: url(br.gif) 100% 100% no-repeat}
.tl {background: url(tl.gif) 0 0 no-repeat}
.tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px}
.clear {font-size: 1px; height: 1px}

Frequently Asked Questions (FAQs) about CSS Rounded Corners and Curves

How can I create a curved cutout on an element using CSS?

Creating a curved cutout on an element using CSS can be achieved by using the ‘clip-path’ property. This property allows you to define a specific region of an element to display, hiding the rest. For a curved cutout, you can use the ‘circle()’ function within the ‘clip-path’ property. Here’s an example:

.element {
clip-path: circle(50% at 50% 50%);
}
This will create a circular cutout at the center of your element. You can adjust the values to position and size the cutout as needed.

How can I draw a curve with CSS?

Drawing a curve with CSS can be done using the ‘border-radius’ property. This property allows you to round the corners of an element, effectively creating a curve. Here’s an example:

.element {
border-radius: 50%;
}
This will create a curve at each corner of your element, giving it a circular appearance. You can adjust the percentage to control the curvature.

How can I create different shapes using CSS?

CSS allows you to create a variety of shapes using different properties. For example, you can use the ‘border-radius’ property to create circles and ellipses, the ‘border’ property to create triangles, and the ‘transform’ property to create more complex shapes. Here’s an example of how to create a circle:

.circle {
border-radius: 50%;
width: 100px;
height: 100px;
}
And here’s an example of how to create a triangle:

.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
You can experiment with these properties to create a wide range of shapes.

How can I style the borders of an element using CSS3?

CSS3 introduces several new properties for styling borders, including ‘border-radius’ for rounded corners, ‘box-shadow’ for adding shadows, and ‘border-image’ for using images as borders. Here’s an example of how to use these properties:

.element {
border-radius: 10px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
border-image: url(border.png) 30 round;
}
This will give your element rounded corners, a shadow, and an image border. You can adjust the values to suit your design.

What are some tips for creating curved borders in CSS?

When creating curved borders in CSS, it’s important to remember a few key points. First, the ‘border-radius’ property accepts percentage values, which can be used to create elliptical shapes. Second, you can specify different radii for each corner of an element by providing multiple values. Finally, using a large radius can create a pill-like shape, which can be useful for buttons and other interactive elements. Here’s an example:

.button {
border-radius: 50px;
padding: 10px 20px;
}
This will create a button with pill-like rounded corners.