CSS Tutorial
CSS - Introduction CSS - How CSS works? CSS - Syntax CSS - Colors CSS - Backgrounds CSS - Borders CSS - Margins CSS - Padding CSS - Height/Width CSS - Box Model CSS - Text CSS - Fonts CSS - Icons CSS - Cursor CSS - Outline CSS - Links CSS - Lists CSS - Tables CSS - Display CSS - Overflow CSS - Position CSS - Float CSS - Align CSS - Opacity CSS - Combinator CSS - Pseudo Classes CSS - Pseudo Elements CSS - Attribute Selector CSS - Buttons CSS - Pagination CSS - Navigation Bar CSS - Dropdowns CSS - Specificity CSS - Transition
CSS Advanced
CSS - Rounded Corners CSS - Border Image CSS - Background CSS - Gradients CSS - Shadow CSS - Text Effects CSS - 2D Transform CSS - 3D Transform CSS - Animation CSS - Object-fit CSS - Box Sizing CSS - Filters CSS - Style Images CSS - Variables CSS - Media Queries CSS - Flexbox Layout CSS - Grid Layout
CSS Responsive
RWD - Introduction RWD - Grid View RWD - Media Queries RWD - Images
CSS References
CSS - Reference CSS - Selectors CSS - Functions CSS - Units CSS - Animatable CSS - Entities

CSS Borders

CSS border properties allow you to specify the style, width, and color of an element's border.

The border can either be a predefined style like, solid line, double line, dotted line, etc. or it can be an image.

I have borders on all sides.

I have a red bottom border.

I have rounded borders.

I have a purple left border.

There are three properties of a border you can change:

  • border-style - specifies whether a border should be solid, dashed line, double line, or one of the other possible values
  • border-width - specifies the width of a border
  • border-color - specifies the color of a border

Border Style

The border-style property specifies what kind of border to display.

The following values are allowed:

  • dotted - Specifies a dotted border
  • dashed - Specifies a dashed border
  • solid - Specifies a solid border
  • double - Specifies a double border
  • groove - Specifies a 3D grooved border. The effect depends on the border-color value
  • ridge - Specifies a 3D ridged border. The effect depends on the border-color value
  • inset - Specifies a 3D inset border. The effect depends on the border-color value
  • outset - Specifies a 3D outset border. The effect depends on the border-color value
  • none - Specifies no border
  • hidden - Specifies a hidden border

The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border).

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border. The effect depends on the border-color.

A ridge border. The effect depends on the border-color.

An inset border. The effect depends on the border-color.

An outset border. The effect depends on the border-color.

No border.

A hidden border.

A mixed border.

Run code

Border Width

The border-width property specifies the width of all four sides of an element's border.

The width can be set as a specific size (in px, em, rem, etc) or by using one of the three pre-defined values: thin, medium, or thick.

The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border).

border-width: 5px;

Run code

Border Color

The border-color property allows you to change the color of all four sides of an element's border.

The border-color property can have from one to four values (for the top border, right border, bottom border, and the left border).

If border-color is not set, the color applied will be the color of the text.

border-color: blue;

Run code

Border - Individual Sides

It is possible to specify a different border for each side (top, right, bottom, and left).

Mixed Border Styles

Run code

The example above gives the same result as this:

Run code

So, here is how it works:

  • When one value is specified, it applies the same border style to all four sides
  • When two values are specified, the first value applies to the top and bottom, the second to the left and right
  • When three values are specified, the first value applies to the top, the second to the left and right, the third to the bottom
  • When four values are specified, the values apply to the top, right, bottom, and left in that order (clockwise)

The border-style property is used in the example above. However, it also works with border-width and border-color.


Border - Shorthand Property

The border property is a shorthand property for setting the following individual border properties in a single declaration:

Run code

You can also specify all the individual border properties for just one side:

Top border:

Run code

Right border:

Run code

Bottom border:

Run code

Left border:

Run code

Rounded Borders

The border-radius property sets the rounded shape for the border corners of an element.

You can specify a single radius to make circular corners, or two radii to make elliptical corners.

No border-radius

border-radius: 5px;

border-radius: 10px;

border-radius: 20px;

Run code

You will learn more about Rounded Corners later in this tutorial.


CSS Border properties

Property Description
border Sets all individual border property in a single declaration
border-bottom Sets the width, style, and color of the bottom border of an element
border-bottom-color Sets the color of an element's bottom border
border-bottom-style Sets the line style of an element's bottom border
border-bottom-width Sets the width of the bottom border of an element
border-color Sets the colors on all four sides of an element's border
border-left Sets the width, style, and color of the left border of an element
border-left-color Sets the color of an element's left border
border-left-style Sets the line style of an element's left border
border-left-width Sets the width of the left border of an element
border-radius Sets the rounded shape for the border corners of an element
border-right Sets the width, style, and color of the right border of an element
border-right-color Sets the color of an element's right border
border-right-style Sets the line style of an element's right border
border-right-width Sets the width of the right border of an element
border-style Sets the line style for all four sides of an element's border
border-top Sets the width, style, and color of the top border of an element
border-top-color Sets the color of an element's top border
border-top-style Sets the line style of an element's top border
border-top-width Sets the width of the top border of an element
border-width Sets the widths on all four sides of an element's border