A border separates an element from its outer content. In this case, the border is part of the element.

Several properties can be used to set the border:

  • border-width : sets the width of the border
  • border-style : sets the style of the border line
  • border-color : sets the color of the border

The property border-width can take the following types of values:

Values ​​in units such as em, px, or cm

border-width: 2px;

One of the constant values: thin(thin border – 1px), medium(medium width – 3px), thick(thick – 5px)

border-width: medium;

The property border-color takes a CSS color as its value:

border-color: red;

The property border-style sets the border line type and can take one of the following values:

  • none: no border
  • solid: regular line border
  • dashed: dashed line
  • dotted: line as a sequence of points
  • double: border in the form of two parallel lines
  • groove: border has a 3D effect
  • inset: the border seems to be pressed inwards
  • outset: similar to inset, only the border seems to protrude outwards
  • ridge: border also implements a 3D effect

For example:

<!DOCTYPE html>
<html lang="en">

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Borders in CSS3</title>