Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

css

What is border-width property in CSS?

Hassaan Waqar

The border-width property is used to set the width of a border in CSS.

The border-width element is always used after the border-style element.

border-style element is used to give a border to an element.

Syntax

The syntax of the border-width property is as followed:

border-width: medium|thin|thick|length|initial|inherit;

Possible values

The border-width property can taken in six possible values:

  • Medium: This is also the value by default. Sets border width to medium

  • Thin: Sets border width to thin

  • Thick: Sets border width to thick

  • Length: We can also define a border based on length in pixels such at 10px, 20px and such.

  • Initial: Sets border width to the default value

  • Inherit: Inherits a border width from its parent element

Different borders of the same element

We can also add borders of different widths to a single element. The following describes the syntax for doing so:

border-width: top right thin left

Each of the four sides can take any of the possible values discussed above.

Examples

The code snippets below show multiple ways of using the `border-width property in CSS:

  • HTML
  • CSS
  • JavaScript

RELATED TAGS

css

CONTRIBUTOR

Hassaan Waqar
Copyright ©2022 Educative, Inc. All rights reserved
RELATED COURSES

View all Courses

Keep Exploring