This section focuses on the border property and will explore border styles, weight, colour and how to apply images and gradients to borders.
CSS Border
Borders are part of the CSS box model and can be applied to all fours sides of an HTML element.
You can find out more about the CSS – Box model in a previous section.
To add a border we must always define the width of the border, we can also define the style and colour of the border.
border-width: 1px;
border-style: solid;
border-color: blue;
}
Headline with border
The result shows the position of the default border around our block of text.
We can use display:inline-block to make text an inline element, this will make the border fit around the text, as shown below.
Headline with border
To adjust the space between the headline and the border we add padding. In the example below, padding:30px is used to add space on all sides.
Headline with border
Border Shorthand
The border has three main properties – the border-width, the border-style and the border-color.
Each of these properties can be combined into the a single shorthand border property using the following syntax:
Using CSS shorthand is a great way to reduce the amount of CSS we need to write. The example below shows we can combine three properties and values into a single line of CSS.
border-width: 1px;
border-style: solid;
border-color: blue;
}
border: 1px solid blue;
}
Let’s explore in detail the three main border properties border-width, border-style and border-color.
Border Width
Border width adjusts the width of the border to any or all sides of an HTML element. The size of the border can be adjusted using either thin, medium, thick, absolute values (pt, px, pc etc) or relative values (%, rem, em, etc).
border-width:thin;
border-width: 5px;
border-width: 0.75rem;
Border width can be set on each side using the following syntax:
border-right-width: value;
border-bottom-width: value;
border-left-width: value;
We can also use shorthand to add different border widths to each side using the border-width property.
border-width: top/bottom right/left;
border-width: top right/left bottom;
border-width: top right bottom left;
Below are examples of these different shorthand border-width properties.
border-width:5px;
border-width:5px 10px;
border-width:5px 10px 20px;
border-width:5px 10px 20px 40px;
Border Style
The border-style property is used to adjust the visual appearance of the border. The default border style is solid, other styles included dotted, dashed, double, groove, ridge, inset and outset.
Below are examples of all border styles:
border-style:solid;
border-style:dotted;
border-style:dashed;
border-style:double;
border-style:groove;
border-style:ridge;
border-style:inset;
border-style:outset;
Please note some of these borders styles vary depending on the user agent (browser), so use the above examples only as a general guide.
The border style can be defined on each side using the following syntax.
border-right-style: value;
border-bottom-style: value;
border-left-style: value;
We can use border-style shorthand to add different styles to each side.
border-style: top/bottom right/left;
border-style: top right/left bottom;
border-style: top right bottom left;
The examples below show how different styles can be applied to each side using the shorthand border-style property.
border-style:solid;
border-style:solid dashed;
border-style:solid dashed dotted;
border-style:solid dashed dotted double;
None and Hidden borders
Most HTML elements have a border-style set by default to none, which means than no border is applied to the element.
Setting the border-style value to hidden, border-style:hidden; will make the border invisible but preserves any space it would occupy.
Border Colour
Colour can be applied to borders using border-color, this works with named colours, RGB, RGBa, HSL, HSLa or HEX colour values.
Like border-width and border-style, we can target each side of the border using the following syntax:
border-bottom-color: value;
border-left-color: value;
border-right-color: value;
We can use border-color shorthand equivalent to target the colour applied to each side.
border-color: top/bottom right/left;
border-color: top right/left bottom;
border-color: top right bottom left;
border-color: blue;
border-color: blue rgb(255,0,0);
border-color: blue rgb(255,0,0) #00FFFF;
border-color: blue rgb(255,0,0)
#00FFFF hsla(0, 0%, 0%, 0.5);
Border Radius
The border-radius property allows a rectangular element to be displayed with rounded corners.
Each corner of the element can be targeted using the following syntax:
border-top-right-radius: value;
border-bottom-left-radius: value;
border-bottom-right-radius: value;
The shorthand equivalent can be used to target each corner with absolute or relative values using border-radius. These values follow a clockwise direction starting from top-left corner.
border-radius: top-left/bottom-right top-right/bottom-left;
border-radius: top-left top-right/bottom left bottom-right ;
border-radius: top-left top-right bottom-right bottom-left;
border-radius: 50px;
border-radius: 0px 50px;
border-radius: 50px 25px 0px;
border-radius: 50px 25px 10px 0px;
These examples show how border-radius can adjust the corner of our HTML element and we can also use border-radius to turn rectangles into ellipses and squares into circles.
Turning a square into a circle
We already know that by adding border-radius value above 0, we will create a rectangle with rounded corners.
If we apply a border-radius above 50% of the height and width of an element then it will create either an ellipse or a circle depending on the proportions of the element.
To create a circle we add border-radius:50%; to a square element.
height:300px;
width:300px;
border-radius:0%;
}
height:300px;
width:300px;
border-radius:33%;
}
height:300px;
width:300px;
border-radius:50%;
}
border-radius:0%;
border-radius:33%;
border-radius:50%;
Border Image
The border-image property can be used to add either an image or gradient fill to a border.
Firstly, we look at adding an image to the border which uses the following four properties:
border-image-slice: value;
border-image-width: value;
border-image-repeat: round, repeat, stretch, space;
In the examples below, we will explore these properties in order to make a border with stars.
border-image-source
The border-image-source: url(…) property is used to link to the image used in the border.
border-image-slice
Images used in border are divided in 9 slices, these are the four corners, the four sides and the center.
To make a border of stars we need to create an image using multiple stars, as shown below. 
The grey stars are used to illustrate how the image is displayed on the sides, we don’t need a star in the center as this is where the content will be.
The border-image-slice property is used to define the position of the corners and sides of the image, in the example above this is 33.33% (one third).
Each corner (blue stars) of our image is in a fixed position, the sides (grey stars) are dynamic and can be repeated or stretched using the border-image-repeat property.
border-image-width
The border-image-width property defines the width of the border image.
border-image-repeat
The border-image-repeat property defines how the sides of the image are displayed. Four values can be used stretch, space, repeat and round.
Stretch
This stretches the image slices on the top, left, right and bottom sides. Stretch is the default value for border-image-repeat.
border-image-slice:33.33%;
border-image-width:20;
border-image-repeat:stretch;
border-image-repeat: stretch
Space
This repeats the image slices on all sides and adds an equal amount of space between each slice.
border-image-slice:33.33%;
border-image-width:20;
border-image-repeat:space;
border-image-repeat: space
Repeat
This repeats the image slice on each side without stretching or distorting the image.
border-image-slice:33.33%;
border-image-width:20;
border-image-repeat:repeat;
border-image-repeat: repeat
Round
Repeats the images on each side, stretching and distorting the image to fill the available area.
border-image-slice:33.33%;
border-image-width:20;
border-image-repeat:round;
border-image-repeat: round
border-image
The border-image property can be combined into shorthand using the following syntax:
border-image-outset
The border-image-outset property can be used to move the position of the border image outside of the box content.
Gradient borders
The border-image property can apply a gradient to the border.
We use the following syntax for the a gradient border fills:
border-image-source: repeating-linear-gradient (direction, colour-start, colour-stop,…);
We can use shorthand properties:
border-image: repeating-linear-gradient (direction, colour-start, colour-stop,…) slice;
So how do we add
Below are examples of the border gradient.
Border Image - Linear Gradient
Here is an example of a repeating-linear-gradient border, complete with free optical illusion.
Border Image - Repeating Linear Gradient
To learn more about Gradients visit the previous section CSS – Color where we explore in more detail linear gradients, radial gradients, repeating linear gradients and repeating radial gradients.
CSS Outline
The outline property is not part of the border property but is included here as it can apply a similar visual effect. An outline will add a line around the outside of the border on all sides.
Although similar, outlines and borders have some key differences between them.
Outlines are not part of the box model and therefore they will not alter the position of an HTML element.
Outlines are applied equally around all sides of an element, so you can’t specify different values for each side like you can with borders.
Outlines can be styled using the following syntax:
outline-style: value;
outline-color: value;
The shorthand outline can be used to combine all these properties.
border: 5px solid red;
outline: 5px dashed blue;
}
solid red border with blue dashed outline
The example above shows a dashed outline in blue on the outer edge of the HTML element’s red border.
Visual space can be added between border and the outline using the outline-offset property, this adds an equal amount of space on all sides between the HTML element and the outline.
border: 5px solid red;
outline 5px dashed blue;
outline-offset:10px;
}
outline with 10px offset
The example show how a 10px space is added between the HTML elements outline and the border.
We have now reached the end of this section which covers the main elements of the border and outline properties. Next we look at fonts and typographic styling.
Next step
CSS – 5 – Fonts