(click anywhere to close)
OPEN MENU

[CSS3] Borders

category: Website | course: CSS3 | difficulty:

Borders are more important than you think. When most people think about borders, especially on the web, they paint a picture of an ugly, grey, thin line around something. Yes, those are the default borders that come with some elements, but those are bad borders. In web design, borders are used very often to subtly make a distinction between different groups or content. The other option you have with borders is to go big or go home – for example, this website uses a huge border to the left of every article to separate content and navigation, and that border forms a significant part of the overall design.

Every element can have a border around it, at all four sides. These can be as large as you want to be, take on certain styles (solid or dots for example), and use colours or images to fill them in. If you find the corners too sharp, you can make them round. As you can see, somehow, a lot of attention was paid to borders when CSS was created.

The Syntax

First, we’ll focus on the syntax for giving one side of an element a border. As expected, the properties for these are border-left, border-top, border-right, and border-bottom. It needs three arguments, which are width, style and colour, respectively.

  • The width determines the size of the border, and takes any positive number.
  • The style must be set to something, or the border won’t display. The list of border styles can be found at the end of this chapter.
  • The colour speaks for itself – it can use any valid CSS colour code.
p {
	border-bottom:1px solid green;
	border-left:3px solid black;
	border-right:8px dotted red;
	border-top:2px solid purple;
}

If you want to alter one of those three arguments individually, you can do that as well! Simply add -width, -style or -color to the end.

p {
	border-left-width:1px;
	border-left-style:solid;
	border-left-color:green;
}

The Shortcut Syntax

Luckily, the syntax for setting multiple borders in one declaration is the same as we’ve seen with padding and margin, and uses the border property. The only difference here is that every value is actually three values.

p {
	border:1px solid green;
}

p {
	border-bottom:1px solid green;
	border-left:1px solid green;
	border-right:1px solid green;
	border-top:1px solid green;
}

/* These two styles are identical */

But, because of that multitude of arguments, you can also set one of them for multiple borders at the same time, using the border-width, border-style and border-color properties.

Round Borders

With round borders, I mean the roundness of the corners. If you set it to some high value, the box will look like an ellipse or circle – but it’s still a box.

You can create them by setting the border-radius property. By default, a border has a sharp edge and therefore border radius 0.

p {
	border-radius:50%;
}

Outlines

Sometimes, we need more than one border. To be able to do so, we can essentially fill some of the element’s margin, creating a border around the border. We can only do this once though: if you want a massive amount of borders, just create multiple nested elements. This is done with the outline property, which accepts the same arguments.

p {
	outline:5px solid green;
}

The outline is in the margin, so it doesn’t add to the element’s width or height.

Image Borders

Using an image as a border is a tricky business. It allows you to create all sorts of fancy borders you couldn’t possibly get with the normal syntax, but it takes some preparation. The property to use is border-image.

First of all, the border-image won’t work if you don’t set a border width, so don’t forget that. The reason for this is that the image scales with the border width, so the default width of 0px leaves you with no image.

It takes three arguments: an image, how to slice the image, and how to apply the image.

The image is provided by URL, which means url(‘pathtofile.jpg’). CSS can handle pretty much any file type, but jpg, png and gif are favourites.

CSS3BorderImage

Slicing the image is done by defining what part of the image is border, and what is not. It works the same way as the normal shortcut syntax for border width, and works from the outside to the inside. See the image for clarification – I can’t really explain this in words.

There are three options for how to apply the image:

  • repeat: repeats the image along the borders
  • stretch: stretches the image to create the borders
  • round: repeats, and then stretches if it doesn’t fit perfectly.

It’s most common to set one value for all borders, but you can set them individually as well if you like.

p {
	border-image: url(aFile.jpg) 10% repeat;
}

List of Border Styles

Value

Description

solid

A regular, solid border

dotted

A dotted border

dashed

A dashed border

double

A double border. The border width is divided into two smaller solid borders with some space between them.

groove

A 3D grooved border. Essentially a double border where the outer and inner border have different colour values.

ridge

A 3D ridged border. Inverse groove.

inset

A 3D inset border. The left and top border have darker values than right and bottom.

outset

A 3D outset border. Inverse inset.

The 3D borders use two different colour values, a light and dark version, which they automatically create from the single border-color you set. Most of these effects can be recreated with more control using border and outline, or border images though.

CONTINUE WITH THIS COURSE
Test your knowledge with the quiz!
How do you adjust the border at the right side of an element?
A
Use the outline property
B
Change the border-radius property
C
Use the border-right property
Do you like my tutorials?
To keep this site running, donate some motivational food!
Crisps
(€2.00)
Chocolate Milk
(€3.50)
Pizza
(€5.00)