CSS Borders property is used to control the look of box formatting in an HTML element.
CSS Borders property makes you to change the border-style, border-color, border-width , and more
You can set following Borders properties −
border-color : The border-color property allows you to change the color of the border surrounding an element.
border-style : The Border style property is used to specify the border type which you want to display on the web page.
border-width : The border-width property is used to set the border's width. It is set in pixels.
Example : CSS - Border
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: dotted;
border-width: 10px;
border-color: red;
}
h3 {
border-style: outset;
border-width: medium;
border-color: green;
}
h4 {
border-style: double;
border-width: thick;
border-color: blue;
}
</style>
</head>
<body>
<p>code always.</p>
<h3>code always to become best programmer.</h3>
<h4>code now.</h4>
</body>
</html>
When the above code is compiled , it produces the following result.
Result
Code Always.
Code Always To Become Best Programmer.
code now.
You can set CSS border properties inline, internal and external way of using CSS in your HTML page.
You can individually change the boarder color,boarder width and boarder style of the bottom, left, top and right sides of an element's border using the properties
Example : CSS - Border
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-bottom-style: dotted;
border-bottom-width: 10px;
border-bottom-color: red;
}
h3 {
border-top-style: outset;
border-top-width: medium;
border-top-color: green;
}
h4 {
border-left-style: double;
border-left-width: thick;
border-left-color: blue;
}
</style>
</head>
<body>
<p>code always.</p>
<h3>code always to become best programmer.</h3>
<h4>code now.</h4>
</body>
</html>
When the above code is compiled , it produces the following result.
Result
Code Always.
Code Always To Become Best Programmer.
code now.
