Get 30% off courses running in September - use code "SEPT30" View training courses

One of the main reasons for having to use images on any web page is to create curves and round corners. It's currently impossible to create any kind of curved shapes using just HTML, so images need to be used. Putting these images into the HTML document with a table layout can create a large amount of superfluous code.

Using the power of CSS we'll create the following box with round corners, without an <img> tag in sight:

Lorem ipsum dolor sit amet consectetur adipisicing elit

How it works

The above box is basically a normal box with an orange background colour and four corner images superimposed on top. All these images have been called up through CSS commands. So, we start off with:

<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 left corner to this <div> through a CSS command. As a rule, you can only assign one background image to an HTML tag with CSS, so this is the only image we'll assign to this <div>. We'll use this image Bottom-left curve and call it bl.gif, and then place it in the bottom-left corner with this CSS command:

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

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

  1. Image URL - Remember, the image is being called up through the CSS so the path to the image is from the CSS document and not the HTML document.
  2. 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> and the second number the distance from the top edge. In this instance % was used, but a different distance value such as em or px could have been used instead. If this command was left out then the default value, 0 0 would be used and the image would be placed in the top-left corner.
  3. Repeat command - Obviously we don't want this image to repeat, so we inserted 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 then 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:

Lorem ipsum dolor sit amet consectetur adipisicing elit

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>

Naming our bottom-right image (Bottom-right curve), 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 our last one, but now we've changed the position from the left to 100%, where previously it was 0%. Our box now looks like:

Lorem ipsum dolor sit amet consectetur adipisicing elit

Top curves

To make our top curves we'll need two new images, Top-left curve and Top-right curve, which we'll call tl.gif and tr.gif. We'll then 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>

And our new CSS rules:

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

Giving us:

Lorem ipsum dolor sit amet consectetur adipisicing elit

Background colour

We'll now insert our orange background colour into the box, so as 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. In this example the images don't overlap so we don't really notice this layering effect.

A background colour by default 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:

Lorem ipsum dolor sit amet consectetur adipisicing elit

Padding

Padding is needed to prevent the text from overlapping on to the images, which are 10px by 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 inside elements will inherit that padding. If we were to assign padding to the very first <div>, <div class=""bl">, we'd get the following:

Lorem ipsum dolor sit amet consectetur adipisicing elit

To get this padding working 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}

Lorem ipsum dolor sit amet consectetur adipisicing elit

Internet Explorer issues

You may have noticed the bottom corners were called up before the top two corners. If we were to do this the other way round, that is call up the top corners first, some parts of the orange background colour 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 overlap on to the element below, again causing a highly unsightly effect. This can be simply solved by placing a tiny placeholder beneath our box with round corners. Immediately after the fourth closing </div>, insert the following HTML:

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

And assign it this CSS rule:

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

The final code

Our finished HTML now looks like:

<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>

And 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}

Case studies

Our success stories

  • UCAS

    UCAS's Track portal is award-winning, achieving a 95%+ satisfaction rating across its 750,000 users

  • Hotels.com

    Hotels.com gained a much stronger competitive advantage due to a great mobile & tablet strategy

  • Pearson Education

    Pearson Education has embedded user-centred design into all their digital design processes

More case studies

What are you working on?

  • End-to-end customer experience

    Join up your customer touchpoints to deliver the best possible digital experience that is proven to deliver outstanding business results

  • Customer loyalty & retention

    Ensure your brand promises are delivered through your digital channels so that your customers return and bring others with them

  • User experience of digital touchpoints

    Make sure all your customer touchpoints consistently deliver the very best in user experience, design and usability.

  • Online sales & conversion optimisation

    Increase conversion across all your digital channels. Our clients sell more because they reap the benefits of our sales optimisation expertise.

  • Digital strategy

    Get ahead of the competition with a customer-centred digital strategy designed to deliver long-term business success.

  • Application & product design

    Deliver the best experience for your customers with intelligent digital applications tailored to your business goals and customer needs.

  • Mobile & tablet strategy

    Improve your mobile & tablet propositions with innovative, cutting-edge interface designs that work for you and your customers.

About us

We're a user experience agency (UX agency) that creates people-centred, efficient and delightful digital experiences.

Get in touch on 020 7423 6320

 

Skip to site navigation