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

CSS and round corners: Borders with curves

In our previous CSS article, CSS and round corners: Boxes with curves, we outlined a method for creating boxes with rounded corners through the power of CSS. A similar technique can be applied to making borders with round corners. We'll start by inserting our four corner curves as background images through the CSS:

Lorem ipsum dolor sit amet consectetur adipisicing elit

The HTML to achieve this effect is:

<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 the CSS that makes it all happen:

.bl {background: url(bl.gif) 0 100% no-repeat}
.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}

If you're not sure how this works please consult the article, CSS and round corners: Boxes with curves for a full tutorial.

Assigning a border

Many of you are probably familiar with the CSS border command, so let's place one around this box:

.bl {background: url(bl.gif) 0 100% no-repeat; border: 1px solid #e68200}

Giving us:

Lorem ipsum dolor sit amet consectetur adipisicing elit

Hmm... that's not looking how it should... What's causing the problem? Have we assigned that border to the wrong <div>? It shouldn't make a difference though, as all the <div>s share the same height and width. The actual cause of our problem is that background images will always appear inside of the border and there's nothing we can do about this.

The solution: more background images

Seeing that we can't use the CSS border command, we'll instead create a 1x1px image, 1 x 1px orange dot (look closely and you can see it), which we'll name dot.gif. We'll attempt to create our border effect by running this image across the top and bottom, and down the left and right, calling it up as a series of background images through the CSS.

First off, we'll remove that border:

Lorem ipsum dolor sit amet consectetur adipisicing elit

Then, we'll run our tiny orange image across the top of the box. We'll need a new <div> to do this:

<div class="t"><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>

And create a new CSS rule:

.t {background: url(dot.gif) 0 0 repeat-x; width: 20em}

The CSS command, repeat-x, has been used, which instructs the browser to repeat our tiny image horizontally. The coordinates 0 0 have been used, which represent the image's distance from the top and left of the box edge respectively - in this case, both distances are zero. Our border with round corners now looks like this:

Lorem ipsum dolor sit amet consectetur adipisicing elit

The remaining borders

We'll now call up this tiny orange image three more times from the CSS as background images, so that it runs along the bottom and down the left and right sides. We'll create three new <div>s:

<div class="t"><div class="b"><div class="l"><div class="r"><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></div></div></div>

And assign three new CSS rules:

.b {background: url(dot.gif) 0 100% repeat-x}
.l {background: url(dot.gif) 0 0 repeat-y}
.r {background: url(dot.gif) 100% 0 repeat-y}

These three CSS rules take the same orange 1x1px image and each runs it along an edge, repeating it horizontally for the bottom edge (using the repeat-x command) and vertically for the left and right edges (using the repeat-y command). Each CSS command has two coordinates assigned to it, the first being the image's distance from the left, the second its distance from the top. As we wish all images to run along the edge of the box, we've only used the coordinates 0 and 100%.

Our border with round corners is now looking much better:

Lorem ipsum dolor sit amet consectetur adipisicing elit

Beware the order of the <div>s!

This border with round corners effect will only work if the curves are called up after the horizontal and vertical lines in the HTML code. This is because each new <div> is effectively a layer on top of the previous <div>.

By calling up the horizontal and vertical lines first, we can then layer the round curves on top of these lines through our CSS background commands. The outside colour of the curves is white (not transparent) and hides the sharp edges of the corners, creating our desired round corners effect.

The final code

Our finished HTML is

<div class="t"><div class="b"><div class="l"><div class="r"><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></div></div></div>

And the CSS that makes our round corner border is:

.t {background: url(dot.gif) 0 0 repeat-x; width: 20em}
.b {background: url(dot.gif) 0 100% repeat-x}
.l {background: url(dot.gif) 0 0 repeat-y}
.r {background: url(dot.gif) 100% 0 repeat-y}
.bl {background: url(bl.gif) 0 100% no-repeat}
.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}

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