Border property helps in creating borders around the text
CSS border properties allow you to specify the style, width, and color of an element's border.
The border-style property specifies what kind of border to display.
- dotted - Defines a dotted border
- dashed - Defines a dashed border
- solid - Defines a solid border
- double - Defines a double border
- groove - Defines a 3D grooved border. The effect depends on the border-color value
- ridge - Defines a 3D ridged border. The effect depends on the border-color value
- inset - Defines a 3D inset border. The effect depends on the border-color value
- outset - Defines a 3D outset border. The effect depends on the border-color value
- none - Defines no border
- hidden - Defines a hidden border
border-style property can have from one to four values (for the top border, right border, bottom border, and the left border)
example:
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Border</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Border Property</h1>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>
</body>
</html>
Style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
p.dotted {
border-style: dotted;
}
p.dashed {
border-style: dashed;
}
p.solid {
border-style: solid;
}
p.double {
border-style: double;
}
p.groove {
border-style: groove;
}
p.ridge {
border-style: ridge;
}
p.inset {
border-style: inset;
}
p.outset {
border-style: outset;
}
p.none {
border-style: none;
}
p.hidden {
border-style: hidden;
}
p.mix {
border-style: dotted dashed solid double;
}
Output:
Border Width
It sets the width of the border in pixels (or there are key values too like medium, thin, thick)
border-width: thin;
CSS Border Color
This property assigns colours to the border of the text
border-color: brown;
Shorthand Property for border:
border: 2px solid red;
Border Radius
Rounded borders around buttons look classic, which can be achieved by border-radius property.
border-radius: 10px;
Do leave your comments