A border provides a frame for your boxes. In this module find out how to change the size, style and color of borders using CSS.
In the box model module, we considered a frame analogy to describe each section of the box model.
The border box is the frame of your boxes,
border properties give you a huge array of options to create that frame in
nearly any style that you can think of.
Border properties #
border properties provide a way to style the various parts of a border.
For a border to appear,
you have to define the
There's a few options to choose from:
When using the
the browser will darken the border color for the second shown color to provide contrast and depth.
This behaviour can vary between browsers,
especially for dark colors such as
In Chrome, these border styles will appear to be solid and in Firefox,
they will be lightened to then provide a darker second color.
Browser behaviour can vary for other border styles too,
so it's important to test your site in different browsers.
A common example of this difference is how each browser renders the
you can use the
shorthand property to define all the parts of your border in one declaration.
border: 1px solid red;
The order of values in the
border shorthand are
border-style and then,
You can set color on all sides of your box or on each individual side with
By default, it uses the box's current text color:
This means that if you only declare border properties,
the color will be that computed value unless you explicitly set it.
border: solid; /* Will be a blue border */
border: solid yellow;
The width of a border is how thick the line is, and is controlled by
The default border width is
This won't be visible unless you define a style, though.
You can use other named widths such as
border-width properties also accept a length unit such as
To set border width on each side of your box, use
Logical properties #
In the Logical Properties module you discovered how to refer to block flow and inline flow, rather than explicit top, right, bottom or left sides.
You have this capability with borders, too:
border: 2px dotted;
border-inline-end: 2px solid red;
In this example,
.my-element has all sides defined as having a
dotted border that is the current text color.
inline-end border is then defined as
2px, solid and red.
This means that in left-to-right languages—like English—
the red border will be on the right side of the box.
In right-to-left languages—like Arabic—
the red border will be on the left side of the box.
Browser support is varied for logical properties in borders, so make sure you check support before using.
Border radius #
To give a box rounded corners use the
This shorthand adds a consistent border to each corner of your box.
As with the other border properties,
you can define the border radius for each side with
You can also specify each corner's radius in the shorthand, which follows the order: top left, top right, bottom right then bottom left.
border-radius: 1em 2em 3em 4em;
By defining a single value for a corner,
you are using another shorthand because a border radius is split into two parts:
the vertical and horizontal sides.
This means that when you set
you are setting the top-left-top radius and the top-left-left radius.
You can define both properties, per corner like this:
border-top-left-radius: 1em 2em;
This adds a
border-top-left-top value of
and a border top-left-left value of
This converts the top left border radius into an elliptical radius,
rather than the default circular radius.
You can define these values in the
/ to define the elliptical values, after the standard values.
This enables you to get creative and make some complex shapes.
border: 2px solid;
border-radius: 95px 155px 148px 103px / 48px 95px 130px 203px;
Border images #
You don't just have to use a stroke-based border in CSS.
You can also use any type of image, using
This shorthand property allows you to set the source image,
how that image is sliced, the image width,
how far the border is outset from the edge and how it should repeat.
border-image-slice: 61 58 51 48;
border-image-width: 20px 20px 20px 20px;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: stretch stretch;
property is like
it is how you set the width of your border image.
property lets you set the distance between your border image and the box that it wraps around.
(source of the border image) can be a
url for any valid image, which includes CSS gradients.
border-image-source: linear-gradient(to bottom, #000, #fff);
property is a useful property that allows you to slice an image into 9 parts, made up of 4 split lines.
It works like the
margin shorthand where you define the top, right, bottom and left offset value.
border-image-slice: 61 58 51 48;
With the offset values defined,
you now have 9 sections of the image: 4 corners, 4 edges and a middle section.
The corners are applied to the corners of the element with the border image.
The edges are applied to the edges of that element.
property defines how those edges fill their space and the
property controls the size of the slices.
fill keyword determines whether the middle section, left by the slicing, is used as the element's background image or not.
is how you instruct CSS how you would like your border image to repeat.
It works the same as
- The initial value is
stretch, which stretches the source image to fill available space where possible.
repeatvalue tiles the source image's edges as many times as possible, and may clip the edge regions to achieve this.
roundvalue is the same as repeat, but instead of clipping the image edge regions to fit as many as possible, it stretches the image as well as repeating it to achieve a seamless repeat
spacevalue is again, the same as repeat, but this value adds space between each edge region to create a seamless pattern.
Which is the default border color?
This special CSS value will represent the computed
text-color value, and is the default border color.
This is made up. Try again!
border: solid hotpink;
What is the default width of a border?
This is a
border-style value, not a
put borders on the left and right (in Latin layouts). put borders on the top and bottom (in Latin layouts). put borders on the inside. put borders on the first line.
border-inline: 1px solid would...
In a Latin layout like English,
border-block would be the top and bottom.