CSS Borders - Our Handy Tutorial

CSS borders are a great way to structure content on your website. Think of them as frames around your text and images. Used well, they help your content stand out and make it easy for your user to understand its stucture. This tutorial will guide you through the use of CSS borders, how to specify their width, style and colour, as well as how to create rounded corners in CSS.


A Little Example

Before we start out, let's look at an example. Here's the code for a DIV element.
    <div>
    Great works are performed not by strength but by perseverance.
    (Samuel Johnson)
    </div>
  

and here's how it looks when viewed in a browser.

Great works are performed not by strength but by perseverance. (Samuel Johnson)

There's no styling on the DIV element, and as a result, the text is not distinguished from the rest of the page content. Now let's add some basic styling - we'll add a simple all-round border to make it stand out. We'll also add some padding - space, internal to the DIV, between the border and the content.

    <div style="border:1px solid; padding:10px;">
    Great works are performed not by strength but by perseverance.
    (Samuel Johnson)
    </div>
  

Here's how it looks now.

Great works are performed not by strength but by perseverance. (Samuel Johnson)


Creating simple CSS borders

To create a border which is the same all the way round an element, you just need a CSS rule like this:

    border: 1px solid #000000;
  

The border property, however, is just a shorthand which allows you to set more than one property at the same time. In the example above, we've set the thickness of the border (1px), the style of the border (solid), and the colour of the border (#000000 - which corresponds to black). The general format of the border rule is:

  border: BORDER-WIDTH BORDER-STYLE BORDER-COLOUR;
  

Let's change the border rule to:

  border: 10px dotted #F52D0B;
  

Now our DIV looks like this:

Great works are performed not by strength but by perseverance. (Samuel Johnson)

Values for border style include:

  • solid
  • dotted
  • dashed
  • double
  • groove
  • ridge
  • inset
  • outset

There is also a none style, which, as you might guess, means no border will be displayed. Note that the visibility of some of the styles depends on the colour of the border. For example, both these elements use the `inset` border style, but only one of them is visible.

Great works are performed not by strength but by perseverance. (Samuel Johnson)
Great works are performed not by strength but by perseverance. (Samuel Johnson)

Border widths In most of our examples, we use px (or pixels - equivalent to 1/96th of an inch) to specify border widths. But there are other distance measures available. For example, there are, among others, the following:

  • em - relative to size of current font
  • rem - relative to size of font of root element
  • % - percentage
  • cm and mm - centimetres and millimetres respectively

The measures em, rem and % are relative measures - i.e., their actual width is relative to some other component - whereas cm, mm, and px are all absolute measures.


More advanced CSS borders

The border property is a shorthand for specifying properties of width, style and colour separately, and also each border separately. For example, specifying

  border: 10px dotted #F52D0B;
  

is shorthand for writing

  border-width: 10px;
  border-style: dotted;
  border-color: #F52D0B;
  

and also shorthand for writing

  border-top: 10px dotted #F52D0B;
  border-right: 10px dotted #F52D0B;
  border-bottom: 10px dotted #F52D0B;
  border-left: 10px dotted #F52D0B;
  

All three of these example will achieve the same effect. The real expressiveness that comes with specifying border and border properties separately comes, however, when we vary their values. For example, writing

  border-top: 10px dotted #F52D0B;
  border-right: 5px dashed #F9EA09;
  border-bottom: 5px dashed #0964F9;
  border-left: 10px solid #000000;
  padding: 10px;
  

produces this (horrible) effect:

Great works are performed not by strength but by perseverance. (Samuel Johnson)

We can also specify each property (width, style, colour) separately for each border. For example:

  border-width-top: 10px;
  border-color-top: red;
  border-style-top: solid;
  

will set the properties separately for the top border. The same can be done for the right, bottom and left borders.


Fun with Flags!

How can we use our new-found knowledge? By creating flags in CSS! Like this CSS:

  border-left: 66px black solid;
  border-right: 66px red solid;
  background-color: yellow;
  width:200px;
  height: 100px;
  

which produces the flag of Belgium!

Or even better, this CSS

border-left: 100px blue solid;
border-top: 50px white solid;
border-bottom: 50px red solid;
width:200px;
height: 100px;
  

makes the flag of the Czech Republic! (Note another div element has been wrapped round the div for the flag in order to put the grey outline round the flag.)


Rounded corners - using border-radius

By default, when you create a border, it has sharp 90 degree corners. With the border-radius property, we can soften those corners. For example,

  border-radius: 10px;
  border: 1px solid darkgrey;
  padding: 20px;
    

does this to the corners of our div element.

Great works are performed not by strength but by perseverance. (Samuel Johnson)

We could also go large and use border-radius:50px, in which case, the div will look like:

Great works are performed not by strength but by perseverance. (Samuel Johnson)

Lastly, it's not commonly known that border radius can be specified using two values. When one value is given, as in

  border-radius: 10px;

then the curvature on the corner is a quarter of a circle - you can think of the border-radius value as being the radius of a circle. The diagram below illustrates this point.

When we specify two values for a border radius, then we effectively specify a horizontal and a vertical radius, creating an ellipse, as illustrated in the next diagram.

The next example shows the effect on our div of using two-valued border radii. Given this CSS

  border-radius: 10px; /* set radius for all corners */
  border-top-left-radius: 75px 50px; /* override default for top-left */
  border: 1px solid darkgrey;
  padding: 20px;
    

we get this effect:

Great works are performed not by strength but by perseverance. (Samuel Johnson)