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">
<head>
<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>
</head>
<body>
<div></div>
</body>
</html>
