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:

1. 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.
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> ; 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.
3. 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 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}


Replay

Category: other Time: 2005-03-18 Views: 1
Tags:

Related post

• CSS and Round Corners: Build Accessible Menu Tabs Article 2004-09-04

One of the best Websites out there, in terms of functionality, is Amazon. In terms of accessibility, though, it's not great. The Problem Amazon's menu tabs, with their nice round corners, look good - but they're totally inaccessible. First of all, th

• How do I create a rounded corners text box using CSS? 2016-01-25

How can I create a rounded corners text box relative to the position of the text? As of now, the box I've created is located on the top left corner of the page while the text has a specific setting with 300px padding on the left and the right. I want

• Table with alternating row colours and rounded corners 2014-06-09

I am trying to create a table with alternating row colours and rounded corners. I combined two answers so far to achieve this: Thorsten Donnig's answer about alternating row colours. Jake's answer about adding rounded corners to a table. This works g

• How to draw a polygon with different line color and rounded corners? 2016-07-27

I want to draw a polygon with different line color and rounded corners, but the corners of polygon are not rounded! \documentclass[12pt]{report} \usepackage{tikz} \begin{document} \begin{tikzpicture}[line width=5pt] \coordinate (A) at (0,0); \coordin

• How can I draw an "arrow box" with curved arrows in tikz? 2015-06-04

Tikz has a special shape called "arrow box". It is a box with arrows going out of it directly. But how can we change the direction of arrows in this shape? In fact, I need to draw an "arrow box" with curved arrows, something like what

• How to draw frame with rounded corners around box 2011-11-08

Is it possible to simply draw a frame around a box which has rounded corners, and be able to control frame width, frame color, frame radius, box background colour (preferably without having to use the complex TikZ package) eg. (this produces a framed

• CSS only rounded corners in IE8? 2011-02-02

Is it possible to get rounded corners in IE8 using only CSS? If so, how? --------------Solutions------------- I know of one simple solution to use; the JavaScript JQuery plugin JQuery Corners. All you have to do is link JQuery and the plugin using an

• CardView padding and rounded corners 2016-02-01

I am trying to add rounded corners and padding to my card views, corner radius don't seem to work when I have content padding. This is my current XML: <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto&quo

• Photoshop how to create a box with curved edges and a background color easily 2015-06-16

As you can see in this picture, the edges are very rough because ive used the the brushes with background color. What I want to achieve is the perfect curve for this angle. I tried to edit the brush settings but it's too complicated for me. Is there

• Read and Display Server-Side XML with JavaScript Article 2003-01-08

XML is a very important base on which Web Services work, and, in conjunction with a number of client- and server-side languages, can be put to good effect. Let's see how we can use XML and client side JavaScript to display the contents of a XML file,

• Paste text in Gmail without the grey box with rounded corners? 2011-05-13

It seems like recently, when I post do a paste in a new Gmail message, there's a box with a gray border and rounded corners that surrounds the contents of the paste. This is incredibly annoying. If I do a Ctrl + Shift + V it'll paste plain text, and

• Color box with rounded corners around a fragment of a formula 2012-12-28

Is there any way in TeX to highlight some part of a formula with a box having colored background and rounded corners? At present, I need to export such formulas into an image, add those highlight boxes in GIMP, and import back into the document as an

• Box with rounder corners, but inverted 2013-09-15

I am a long time LaTeX user, and recently I needed something which I could not figure out by myself, so I would appreciate anyones time and help. I need a box with rounded corners, which is easy to do - for example, this thread shows how: How to draw

• In HTML, how can I create a box with a curved banner scroll on the left hand side? 2012-04-01

I was in a website and it had some boxes with content in them and an image on top of the boxes with some text in them. Like a title for what the box is for. The problem is that I don't know how to do this kind of design. I am talking about the left s

• SitePoint Podcast #112: Where Are My Rounded Corners? 2011-05-13

Episode 112 of The SitePoint Podcast is now available! This week the panel is made up of Louis Simoneau (@rssaddict), Brad Williams (@williamsba), Patrick O'Keefe (@ifroggy), Stephan Segraves (@ssegraves), and Craig Buckler (@craigbuckler). Listen in

• Rounded corners in WebPart headers SP2010 2011-12-01

When I view the site in FireFox the below does work with rounded corners, but not in IE at all. I'm trying to make a webpart header in SP 2010 rounded. .ms-WPHeader td { background: #005bac; background-image: -webkit-gradient(linear, left bottom, lef

• How to automatically add rounded corners to thumbnails? 2011-04-29

I want to created automatically rounded corner thumbnails for a particular project I'm working on, using something like this: http://webdeveloperplus.com/php/create-thumbnail-images-with-rounded-corners/ What I'd ideally like to do is find a way to h

• Getting rid of all the rounded corners in Twitter Bootstrap 2012-03-16

I love Twitter Bootstrap 2.0 - I love how it's such a complete library... but I want to make a global modification for a very boxy-not-round site, which is to get rid of all the rounded corners in Bootstrap... That's a lot of CSS to chug through. Is

• Rounded corners without a link to a separate rounded shape xml file? 2014-02-27

Is there a way to round a view's corners without using the android:background="drawable/rounded_corners" attribute to link to another shape xml file? The reason I ask this is because I need to dynamically (and programmatically) change the view's