border property sets an HTML Element border and its width, color & style. By default html element borders are not visible.
Example
<html>
<head>
<style>
div{
border:1px solid black;
}
</style>
</head>
<body>
<div>
Border example
</div>
</body>
</html>Here in above example, 1px is width, solid is type of border, and black is border color.
Setting Specific Sides of HTML Element
Specific sides of HTML element like left, right, bottom, top border can be set.
Border Bottom example : CSS
<html>
<head>
<style>
div{
border-bottom:1px solid black;
}
</style>
</head>
<body>
<div>
Border example
</div>
</body>
</html>Border Top example : CSS
<html>
<head>
<style>
div{
border-top:1px solid black;
}
</style>
</head>
<body>
<div>
Border example
</div>
</body>
</html>Border left example : CSS
<html>
<head>
<style>
div{
border-left:1px solid black;
}
</style>
</head>
<body>
<div>
Border example
</div>
</body>
</html>Border Right example – CSS
<html>
<head>
<style>
div{
border-right:1px solid black;
}
</style>
</head>
<body>
<div>
Border example
</div>
</body>
</html>Rounded Border – CSS
By default html element borders have sharp or pointed edges, to make borders round of html elements use border-radius property.
<html>
<head>
<style>
div{
border:1px solid red;
border-radius:5px;
}
</style>
</head>
<body>
<div>
Rounded Border example
</div>
</body>
</html>