BECOME A SCRUM MASTER WITH OUR NEW AGILE PM 1-DAY COURSEBook now

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

Training academy

  • User experience

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

  • Website optimisation

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

  • Online copywriting

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

  • Web development

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

  • Online marketing

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

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