Here you will get code for:
- Border width
- Border Color
- Border Sides
- Rounded Border
<!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>CSS-border properties</title>
<style>
h1 {
border: lightgreen inset 20px;
border-radius: 19px; /*for rounded borders*/
}
h2 {
border: red dashed 15px;
border-radius: 19px;
}
h3 {
font-size: 60px;
border-top: gray groove 30px;
border-right: 40px double blue;
border-bottom: 25px outset red;
border-left: 50px solid #000;
border-radius: 19px;
}
h4 {
font-size: 60px;
border-top: 40px solid #000;
border-right: 40px solid blue;
border-bottom: 40px solid green;
border-left: 40px solid red;
border-radius: 19px;
}
p{
border: 25px double red;
border-radius: 19px;
}
/* h1,h2,h3{
border-style: dashed;
border-color: red;
background-color: gray;
border-width: 10px;
} */
</style>
</head>
<body>
<h1>Heading 1 containing ridge border</h1>
<h2>H2 heading containg dashed red color border</h2>
<h3>this is containg different types of border</h3>
<h4> This is containg different colors borders </h4>
<p>this is paragraph Lorem ipsum dolor, sit amet consectetur adipisicing elit. Saepe quos ea soluta, natus veniam
quo dolores voluptate id laborum. Nemo tempora at magni sed deserunt necessitatibus labore vel. Fuga, dolorem.
</p>
</body>
</html>
0 Comments