Borders Properties
<!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>Borders Properties</title>
<style>
/* H1 heading tag with border-style, border-color & border-width */
h1 {
border-style: solid;
border-color: blue;
border-width: 5px;
}
/* H2 heading tag with border-style defined for TOP RIGHT BOTTOM LEFT sides */
h2 {
border-style: solid dotted solid dotted;
border-color: red;
border-width: 3px;
}
/* H3 heading tag with border shorthand representation */
h3 {
border: 2px solid darkolivegreen;
}
</style>
</head>
<body>
<!--
border-style : specifies what kind of border to display.
border-width : specifies the width of four borders.
border-color : specifies the color of the four borders.
border - specifies shorthand for individual above mentioned border properties.
There are also properties for specifying each of the borders (top, right, bottom, and left)
Example : border-right-style: solid;
-->
<h1>Demo: Borders Properties</h1>
<h2>Lorem ipsum dolor sit.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam cum inventore aliquid beatae tempore magnam similique voluptatibus ipsa laudantium quaerat expedita, tenetur alias magni totam fugit rem vitae impedit, non velit, enim vero? Neque incidunt minima mollitia, sed, beatae quisquam rem omnis maiores ipsam iusto atque ex deleniti. Possimus deleniti voluptatum nam pariatur fugit quisquam dolor porro magni iusto ducimus similique ipsa ut officiis fuga natus, voluptate magnam, asperiores distinctio maiores eum cupiditate, aliquid animi? Libero dolorum eius tempora aliquam accusantium molestias sapiente odit mollitia saepe voluptatum! Aliquam tempora nostrum voluptas necessitatibus accusamus! Mollitia laboriosam eum porro ipsum nobis cupiditate?</p>
<h3>Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam cum inventore aliquid beatae tempore magnam similique voluptatibus ipsa laudantium quaerat expedita, tenetur alias magni totam fugit rem vitae impedit, non velit, enim vero? Neque incidunt minima mollitia, sed, beatae quisquam rem omnis maiores ipsam iusto atque ex deleniti. Possimus deleniti voluptatum nam pariatur fugit quisquam dolor porro magni iusto ducimus similique ipsa ut officiis fuga natus, voluptate magnam, asperiores distinctio maiores eum cupiditate, aliquid animi? Libero dolorum eius tempora aliquam accusantium molestias sapiente odit mollitia saepe voluptatum! Aliquam tempora nostrum voluptas necessitatibus accusamus! Mollitia laboriosam eum porro ipsum nobis cupiditate?</p>
<h2>Lorem ipsum dolor sit.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam cum inventore aliquid beatae tempore magnam similique voluptatibus ipsa laudantium quaerat expedita, tenetur alias magni totam fugit rem vitae impedit, non velit, enim vero? Neque incidunt minima mollitia, sed, beatae quisquam rem omnis maiores ipsam iusto atque ex deleniti. Possimus deleniti voluptatum nam pariatur fugit quisquam dolor porro magni iusto ducimus similique ipsa ut officiis fuga natus, voluptate magnam, asperiores distinctio maiores eum cupiditate, aliquid animi? Libero dolorum eius tempora aliquam accusantium molestias sapiente odit mollitia saepe voluptatum! Aliquam tempora nostrum voluptas necessitatibus accusamus! Mollitia laboriosam eum porro ipsum nobis cupiditate?</p>
</body>
</html>