Today let's learn how to create borders by using a tag in HTML coding. It is very easy and simple. So guys, let's learn it with great interest.
Open a notepad and type any text between the opening and closing of the <div> tag. Then save the notepad as any file name you want but make sure to add .HTML at the end of your file name. After that open the HTML file with any web browser.
Add a border outside the text that we have typed. You can type style="border: 5px solid #42f5ef;" at the opening of the <div tag>. Go to file and click Save.
Reload the web page on the browser. This time you can see a border outside the text. The size of the border is 5px. You can keep any border size you want. The type of border is "solid". #42f5ef is the color code of the border. You can keep the text alignment to the center by adding text-align: center; as shown here style="border: 5px solid #42f5ef; text-align: center;"
You can reduce the width of the border. Let's say the width of the border is 30%. (style="border: 30px dotted #af2eff; text-align: center; width: 30%;"). You can also increase the height of the border but here I have kept the height of the border as it is. Let's bring the border to the Center. You can do it by using a <center> tag.
You can change the border type from "solid" to "double", dotted, dashed, groove, ridge, inset, and outset. Now let's also add a border-radius. I am keeping the border-radius to 15px. (style="border:30px dotted #af2eff; text-align:center; width:30%; border-radius:15px;").
If you want to add a border to your blogger or website, you can copy the code that we have created and paste it into the HTML area of your blogger or website.
That's it, guys. Thanks for reading and goodbye until next time.
Border Part Two at https://c815.blogspot.com/2022/11/border-css-part-2.html
You can reduce the width of the border. Let's say the width of the border is 30%. (style="border: 30px dotted #af2eff; text-align: center; width: 30%;"). You can also increase the height of the border but here I have kept the height of the border as it is. Let's bring the border to the Center. You can do it by using a <center> tag.
You can change the border type from "solid" to "double", dotted, dashed, groove, ridge, inset, and outset. Now let's also add a border-radius. I am keeping the border-radius to 15px. (style="border:30px dotted #af2eff; text-align:center; width:30%; border-radius:15px;").
<center>
<div style="border: 5px dotted #af2eff; text-align: center; width: 30%; border-radius:15px;">
She shall sail ship on sea
</div>
</center>
<div style="border: 5px dotted #af2eff; text-align: center; width: 30%; border-radius:15px;">
She shall sail ship on sea
</div>
</center>
If you want to add a border to your blogger or website, you can copy the code that we have created and paste it into the HTML area of your blogger or website.
That's it, guys. Thanks for reading and goodbye until next time.
Border Part Two at https://c815.blogspot.com/2022/11/border-css-part-2.html
No comments
Post a Comment
If you have any doubt, please let me know.