This article was originally published on webinuse.com
The CSS border properties allow us to style element's border. We can set the width, style, radius, and color of element's border. We can style borders in three different ways.
- Specifying CSS border properties individually
- Specifying every border individually
- Using shorthand property
Specifying CSS border properties individually
There are four properties that we can use to style borders.
-
border-style
property that specifies the border type -
border-color
is used to specify the color of the border(s) -
border-width
specifies how wide/thick our border is -
border-radius
property is used to specify the amount of radius of the border
Border style
border-style
property is used to specify the type of the border we are going to use. There are several predefined values that we can use.
-
none
- without any type -
solid
- solid border. Probably the most popular choice -
dashed
- dashed border -
dotted
- dotted border -
double
- double border -
groove
- 3D grooved border, works withborder-color
value -
ridge
- 3D ridged border, works withborder-color
value -
inset
- 3D inset border, works withborder-color
value -
outset
- 3D outset border, works withborder-color
value -
hidden
- hides border
Border color
CSS border border-color
property is used to specify the color of the border. It accepts any type of color value like HEX, HSL, RGB, RGBA, etc.
NOTE border-color
property can be used, only, with other CSS border properties, not alone. If used alone, it does not work because it has no border to change color.
Border width
border-width
property can be used with custom size expressed in pixels, em, rem, vw, vh, almost anything except %
, or we can use three of the predefined values: thin
, medium
, thick
. If no width is specified, the default width of the border is medium
.
NOTE border-width
property must be used with border-type
property, otherwise it does not work.
Border radius
We all love those rounded corners, right? In order to make one we have to use border-radius
property. This CSS border property allows us to specify the amount of "roundness" we want. We can use any CSS unit to specify the value for border-radius
.
Specifying every border individually
We can specify every border individually, by refering directly to that exact border. There are four options:
border-top
border-right
border-bottom
border-left
When using any of those options, we have to group values in single value, using space as delimiter. Order of the values is: border-width
, border-type
, border-color
. We can specify every value except the one for radius. That is because, border-radius
has its own way of specifying such things. Let's see an example.
Specifying border radius for every border individually
To specify border radius for any border individually we have to use some/all of the following CSS border properties:
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
Now, we can specify border radius for any of those corners, using any of CSS Units.
Using shorthand property
We can leverage CSS' ability to declare multiple values, using single property.
border-width: 1px 2px 3px 4px;
border-color: red blue green yellow;
border-style: solid dashed dotted solid;
This gives us power to apply different styles to all/some borders in single line. The only rule that we have to follow is that values are ordered in following way: top, right, bottom, left. Meaning starting from top clock-wise.
If all four borders are the same, there is even shorter syntax.
border: 1px solid red;
Same as we have mentioned above, there is strict order of the values. 1. is always border-width
, 2. is always border-style
, and 3. is always border-color
. Order of the items must be respected.
If you have any questions or anything you can find me on my Twitter, or you can read some of my other articles like JavaScript String replace method.
Top comments (0)