border
The CSS border
property is a shorthand used to set the border width, style, and/or color of an element’s border.
An element in CSS is represented by the box model.
Above, you can see that the border of an element is just one or more lines that surround the element’s content and padding. An element’s border does not extend into the margins because the element’s content stops at its padding. Consider an example:
border: 1px solid green;
This will set the targeted element’s border width to be 1px, its border appearance to be solid, and its color to be green.
See the Pen
css borders example by Chidume David (@philipsz-davido)
on CodePen.
The normal syntax of border
is:
border: <border-width> <border-style> <border-color>;
Some values can be omitted in border
, which will force the CSS engine to assign initial values.
border: <border-style>
If border
is assigned only a single value, it must be the <border-style>
; the border will be invisible if it is not defined. CSS will then take the initial values of the border width (medium
) and color (currentcolor
). The width is computed to be around 3px, and the color will be the text color or the foreground color of the element.
border: solid;
Here, the border style is solid. CSS will then set the border width to medium
, which is 3px, and set the color to be black (rgb(0, 0, 0);
), which is the default color of an element if it has no color set on itself or if it has no inherited color from its parent element. That’s why we will see a black border of 3px appear around the element.
border: solid; color: red;
Above, we set the color of the element to be red. The border will be 3px wide, solid-styled, and red in color. As we can see, the color of the element, or the inherited color from its parent element, affects the color of the element’s border color if it is not set.
border: <border-width> <border-style>
This syntax sets the width and style of the border. CSS will then compute the color of the border from the element’s color property or its inherited color property.
border: 9px dotted;
The element will have a border width of 9px, and the border appearance will be dotted. The border color will then be the color of the element or its inherited color. As discussed above, CSS sets the default color to black in the absence of a set/inherited color property.
color: green; border: 9px dotted;
In this case, we have a color property set on the element to be green. The border color of the element will then be green in color.
border: <border-style> <border-color>
The above syntax has only the border style and color explicitly set. CSS will compute and set the border-width
to be medium, which is approximately 3px wide.
border: solid red;
This sets the border style and color of an element to be red in color and 3px wide.
Whenever we use the sole border
shorthand property, we are setting three CSS border properties.
border-color
border-style
border-width
border-color
This property sets the border color of an element.
border-color: red;
The border color is set to red.
border: 9px solid; border-color: red;
The first rule sets the width and style, and the color is computed by CSS to be black, the default text color of the element. border-color
then informs CSS to disregard the default text color and instead use its value of red
.
So we have a solid, red-colored border of 9px wide on the element.
border-color
has single-side computed properties:
border-top-color
border-bottom-color
border-right-color
border-left-color
If they are not defined individually, they will all take the value of border-color
.
border-style
This property styles the appearance of the border. It can take the following 10 values:
none
: There will be no border on the element, even if the border width and color are sethidden
: Equivalent to none
, but it has a slightly different effect when applied to tablesdotted
: Assigns a dotted borderdashed
: Assigns a dashed bordersolid
: Assigns a solid, unbroken borderdouble
: Assigns a double border. The lines’ width, and the width of the space between them, are equal to the value of border-width
groove
: Assigns a 3D grooved border, which appears as though it were chiseled/engravedridge
: Assigns a 3D ridged border, which appears as though it has ridges cut out at the edgesinset
: The top and left sides of the border will be darker in color, and the bottom and left sides will be lighter in coloroutset
: The reverse of inset; the bottom and left sides of the border are darker in color, while the right and top sides are lighterborder-style
also has single-side computed properties:
border-top-style
border-bottom-style
border-left-style
border-right-style
If they are not defined individually, they will all take the value of border-style
.
We can set multiple styles on an element’s border by using the single-side properties of border-style
. Its syntax is:
border-style: <top> <right> <bottom> <left>
Values are assigned as follows:
//one value: border-style: <top, bottom, right, left> //two values: border-style: <top, bottom> <right, left> //three values: border-style: <top> <right, left> <bottom>
Here’s an example:
border-style: solid dotted
This sets the style of the top and bottom portions of the border to be solid
and sets the left and right sides to be dotted
.
border-style: solid dotted dashed
This sets the top to be solid
, the bottom to be dashed
, and the left and right sides to be dotted
.
border-width
This property sets the width of the border. It can accept the following values:
<length>
: This is the value of the border width explicitly set by the user. It can be of any unit: px, em, pt, etc.thin
: ~1pxmedium
: ~3pxthick
: ~5pxNote: CSS does not define exact values for the keywords above; their results may vary by implementation.
border-width
has single-side computed properties as well:
border-top-width
border-bottom-width
border-left-width
border-right-width
If they are not defined individually, they will all take the value of border-width
.
As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.
LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app, mobile app, or website. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.
Modernize how you debug web and mobile apps — start monitoring for free.
Would you be interested in joining LogRocket's developer community?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up nowSimplify component interaction and dynamic theming in Vue 3 with defineExpose and for better control and flexibility.
Explore how to integrate TypeScript into a Node.js and Express application, leveraging ts-node, nodemon, and TypeScript path aliases.
es-toolkit is a lightweight, efficient JavaScript utility library, ideal as a modern Lodash alternative for smaller bundles.
The use cases for the ResizeObserver API may not be immediately obvious, so let’s take a look at a few practical examples.