CSS Borders
CSS borders are utilized to draw a visual border around HTML page elements.
The following are the various properties of a CSS border:
Border Style
The CSS border-style property defines the style of the border.
Example:
HTML
<!DOCTYPE
html>
<html>
<head>
<title>
CSS Borders
</title>
</head>
<body>
<p
class="none">no border</p>
<p
class="hidden">Hidden Border</p>
<p
class="dotted">Dotted Border</p>
<p
class="dashed">Dashed Border</p>
<p
class="solid">Solid border</p>
<p
class="double">Double Border</p>
<p
class="groove">Groove border</p>
<p
class="ridge">ridge border </p>
<p
class="inset">inset border</p>
<p
class="outset">Outset Border</p>
</body>
</html>
CSS
.none
{
border-style: none;
}
.hidden
{
border-style: hidden;
}
.dotted
{
border-style: dotted;
}
.dashed
{
border-style: dashed;
}
.solid
{
border-style: solid;
}
.double
{
border-style: double;
}
.groove
{
border-style: groove;
}
.ridge
{
border-style: ridge;
}
.inset
{
border-style: inset;
}
.outset
{
border-style: outset;
}
Output
Border Color
The border-color CSS property is used to define the border color.
Example:
HTML
<!DOCTYPE
html>
<html>
<head>
<title>
CSS Borders
</title>
</head>
<body>
<p
class="dotted">Dotted Border</p>
<p
class="dashed">Dashed Border</p>
<p
class="solid">Solid border</p>
</body>
</html>
CSS
.dotted
{
border-style: dotted;
color: orange;
}
.dashed
{
border-style: dashed;
color: rgb(39, 39, 255);
}
.solid
{
border-style: solid;
color: #36e900;
}
Output
Border Width
The CSS property border-width defined the width of the border. It utilized values such as medium, thin, and thick to define the width of the border.
Example:
HTML
<!DOCTYPE
html>
<html>
<head>
<title>
CSS Borders
</title>
</head>
<body>
<p
class="dashed">Dashed Border</p>
<p
class="solid">Solid border</p>
</body>
</html>
CSS
.dashed
{
border-style: dashed;
border-width: 6px;
}
.solid
{
border-style: solid;
border-width: thin;
}
Output
Border Radius
The CSS border-radius property specifies the rounded corners of the border of the element.
Example:
HTML
<!DOCTYPE
html>
<html>
<head>
<title>
CSS Borders
</title>
</head>
<body>
<p
class="border1">
Border 1
</p>
<p
class="border2">
Border 2
</p>
</body>
</html>
CSS
.border1
{
border: 4px solid blue;
border-radius: 6px;
}
.border2
{
border: 4px solid #1033ff;
border-radius: 20px;
}
Output
