Borders In CSS

❮ Prev Next ❯

CSS border properties are used to design and shape borders of elements on web pages.

The CSS border can specify color, border type, the width of the border, etc. These are the following properties in CSS for border:

  1. border-style
  2. border-width
  3. border-color
  4. border-radius
  5. border
CSS border example
This is an example text.

Let's look at all these properties with examples.

1. CSS Border Style

The border-style property defines the style of the border. It specifies the type of border to be drawn. It can have the following values:

Let's see the following example to understand the border-style property.

Example

<p style="border-style:solid">Border created is solid.</p>
<p style="border-style:dashed">Border created is dashed.</p>
<p style="border-style:dotted">Border created is dotted.</p>
<p style="border-style:double">Border created is double.</p>
<p style="border-style:hidden">Border created is hidden.</p>
<p style="border-style:none">Border created is none.</p>
<p style="border-style:groove">Groove defines a 3D grooved border.</p>
<p style="border-style:ridge">ridge defines a 3D ridged border.</p>
<p style="border-style:inset">Inset defines a 3D inset border.</p>
Try it

2. CSS Border Color

Borders can be given color using the border-color property.

The color value of the border-color property can be any valid CSS color value. It can be specified as:

Note - Before setting border-color you must set border-style because to set the color to border it must exist first.

Example

.color1 { border-color: red }
.color2 { border-color: #d423bd }
.color3 { border-color: rgb(124,45,20) }
.color4 { border-color: hsl(90,50%,50%) }
Try it

3. CSS Border Width

CSS border-width property controls the width of the border.

The width value of the border-width property can be given on any valid scale.

Using the border-width property we can also individually control the width of each side of the box by using the following property:

Note: Before setting border-width you must set border-style because to set width to border it must exist first.

Example

.width1{ border-width:5px; }

.width2{ border-width:10px; }

.width3{ border-top-width:8px; }

.width4{ border-right-width:0; }
Try it

Instead of using CSS property to specify a width for each side of the box, you can also set values like border-width: top right bottom left.

Using this method you can set different values on different sides.

Example

p.width {
    border-style:solid;
    border-width: 1px 3px 0px 5px;
}
Try it

4. CSS Border Radius

CSS border-radius property is used to create rounded corners on an element's border.

The border-radius property can have from one to four values.

  • If one value is given, it applies to all four corners.
  • If two values are given, the first applies to the top-left and bottom-right corners, and the second applies to the top-right and bottom-left corners.
  • If three values are given, the first applies to the top-left corner, the second applies to the top-right and bottom-left corners, and the third applies to the bottom-right corner.
  • If four values are given, they apply to the top-left, top-right, bottom-right, and bottom-left corners, respectively.
CSS border-radius example
This is an example text.

Example

.radius1 { border-radius: 10px; }

.radius2 { border-radius: 10px 20px; }

.radius3 { border-radius: 10px 20px 30px; }

.radius4 { border-radius: 10px 20px 30px 40px; }
Try it

CSS border (shorthand)

You have seen how to set the border style, width, and color individually. But you can also set all these properties in one line using the border property.

Using shorthand border property is more convenient, easy to remember, and most importantly, it saves time.

You can set the border style, width, and color in one line in any order.

Example

.border1 { border: 1px solid red; }
.border2 { border: 1px red solid; }
.border3 { border: solid 1px red; }
.border4 { border: solid red 1px; }
.border5 { border: red solid 1px; }
.border6 { border: red 1px solid; }
Try it

When you use the border property, you can omit the border color or the border width. If you omit the border color, the default value is black. If you omit the border width, the default value is 3px.

CSS border example
This is an example text.

In the next article, you will learn about CSS Margins.

❮ Prev Next ❯