<?xml version="1.0" encoding="utf-8"?>

CSS properties for setting border width

CSS properties for setting border width Bad Practice
CSS properties for setting border width Best Practice

In contrast to the outline, the element's borders can each be of different widths. The border width can take a predefined value — thin, medium, or thick — or a more specific one using pixels (px), points (pt), centimeters (cm), or ems, like in the example.

You can specify the property in 3 ways:

  • Using the border shorthand property and setting the same width for all sides
  • Using the border-width shorthand property and setting the same or various widths for each side
  • Using individual properties for each side (border-bottom-width, border-left-width, border-right-width, and border-top-width)
Improve your UX & Product skills with interactive courses that actually work