How To Change Border Color In HTML
Last Updated : Mar 11, 2024
IN - HTML | Written & Updated By - Riya
In this tutorial we will show you how to change border color in HTML, the border color property is used to add color or change the color of borders of an element. As borders are used to set a visible line of some width to most of webpages.
We can set border to HTML elements by two ways: first by using JavaScript properties and another is by using CSS. Here, we read and understand or go through only CSS property and in further sections we will read about JavaScript i.e. by using Get element by Id.
Step By Step Guide On How To Change Border Color In HTML :-
By using CSS border color property
Now, we know that every element in HTML genuinely has four borders. So, border-color property is used to sets color of four borders of an element.
We also can use four different values to set colors to borders and those value may be in between one to four. Here, is an example to understand the border-color properties.
<!DOCTYPE html>
<html>
<head>
<title> Title of the document<title>
</head>
<body>
<div style="border-style: solid; border-color: blue;">
this is first paragraph tag using only one border color property.
</div>
<br>
<br>
<div style="border-style: solid; border-color: red green yellow blue;">
this is next paragraph tag using four different color properties for different borders
</div>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here. Now, to give colors to borders we use border-style and border-color attributes.
- Border-style attribute is used to explain what type of border we want, it means that the border line may be dashed, solid, dotted, etc. these are also considered as the values of border-style attributes also.
- Border-color attribute is used to give colors to borders the color may be one color to all borders and may be two, three and also four different colors.
- If the border-color property has one value like If border-color is red only then all the sides of border are red.
- If the border-color property has two values like If border-color is red and yellow then top and bottom borders is red, right and left borders is yellow in color.
- If the border-color property has three values like If border-color is red, yellow and green then top border is red, right and left borders is yellow and bottom border is green.
- If the border-color property has four values like If border-color is red, yellow, green and blue then top border is red, right border is yellow, bottom border is green and left border is blue.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
In conclusion, we found that we can apply same color or also different colors to any border with the help of border-color attribute.
There are also many other attributes related to borders that we can use to make an effective webpage. I hope this tutorial on how to change border color in HTML helps you.
About Riya
