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.
<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.
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.
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;
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:
Values for border style include:
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.
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
mm- centimetres and millimetres respectively
% are relative measures - i.e., their actual width is relative to some other component - whereas
px are all absolute measures.
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:
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.
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.)
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
We could also go large and use
border-radius:50px, in which case, the
div will look like:
Lastly, it's not commonly known that border radius can be specified using two values. When one value is given, as in
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: