Program:
Output:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Borders</title>
<style>
body {
font-family: Arial, sans-serif;
}
div {
background-color: lightsalmon;
text-align: center;
padding: 10px;
margin: 10px;
width: 500px;
}
#bt {
border-top: dotted ;
border-color: black;
border-width: 5px 20px;
}
#btall {
border: 5px dashed ;
border-color: blue;
}
#bb{
border-bottom: solid ;
}
#br{
border-right: double;
}
#bl{
border-left: groove ;
}
#borderas{
border: 2px ridge black;
border-radius: 5px;
}
#brt{
border: 4px inset black;
border-radius: 50px 20px;
}
#movie{
border-style: outset ;
border-width: thick;
}
</style>
</head>
<body>
<!-- BORDER TOP -->
<div id="bt">
<h2>BORDER TOP</h2>
</div>
<!-- BORDER RIGHT -->
<div id="br">
<h2>BORDER RIGHT</h2>
</div>
<!-- BORDER BOTTOM -->
<div id="bb">
<h2>BORDER BOTTOM</h2>
</div>
<!-- BORDER LEFT -->
<div id="bl">
<h2>BORDER LEFT</h2>
</div>
<!-- BORDER ALL SIDES -->
<div id="btall">
<h2>BORDER ALL</h2>
</div>
<!-- ROUNDER BORDER ALL SIDES -->
<div id="borderas">
<h2>ROUNDED ALL</h2>
</div>
<!-- ROUNDED TWO SIDES -->
<div id="brt">
<h2>ROUNDED TWO</h2>
</div>
<!-- CUSTOM BORDER -->
<div id="movie">
<p>
Incididunt aliqua enim ullamco nostrud sint aliquip. Qui minim esse occaecat eu ipsum eu do aute magna nisi
magna. Tempor ex labore eiusmod sit.
Proident magna culpa eu nisi. Ea magna ullamco qui eiusmod est dolore duis consequat. Occaecat reprehenderit
do sit sint ullamco aute officia proident excepteur proident ipsum.
Nostrud laborum aute deserunt aliquip mollit velit pariatur. Adipisicing eu ullamco consequat Lorem
consequat. Dolore dolor dolor sunt dolor dolore esse magna proident et magna exercitation enim.
</p>
</div>
</body>
</html>
Output:
