In this tutorial we will show you the solution of border thickness CSS, as not specified here that is this border relates to table or any other thing in html.
So, answer is that today we will understand about simple border properties of tags like div, section, etc. whereas border regarding table is discussed in our next tutorial.
So, now let us start our today’s tutorial with the example given below.
Step By Step Guide On Border Thickness CSS :-
As, border thickness is used to defined the thickness of border of all four sides of an html tag or element.
Mainly the default value that is already given to borders is medium. There are many other values also that we can give to border-width to change the thickness of border under CSS. Below is given the chart of values.
- Length: it is mainly used to set the width of the border. In other words, it defines the thickness of the border.
- Initial: initial is used to set default values of border.
- Inherit: inherit means the value of border-width is depend on the parent’s border value.
- Thin: thin is used to set a thin border.
- Thick: thick is same as thin but it thickens our border
- Medium: medium is neither thinner nor thicker. It is default value of border-width.
<!doctype html>
<html>
<head>
<title> CSS tutorials </title>
<style>
div{
border-style: solid;
border-width: thin 100px thick 1em;
}
</style>
</head>
<body class=”bgImage”>
<h1>
Talker’s code – CSS tutorials
</h1>
<h2>
Background image CSS cover
</h2>
<div>
This is the division with help of which talkers code is going to show border thickness using css.
</div>
</body>
</html>
- As, here we see that we that in above example we show you an example in which html and CSS codes are used.
- Let us understand the above codes step by step.
- Here, first of all we create a basic structure of html, in which we use <!DOCTYPE html> which defines the type of document. And next one is our html tags. These tags are paired tag and all the data regarding html is written inside these tags.
- After we use our head tag which is again paired tag and contains title and meta information of the webpage. The data written inside head is not showed on the webpage.
- Now, next is our title tag which defines the title of webpage. The tag which has its closing tag is known as paired tag. So, this is again paired tag.
- Now, next is body which is main tag of html. The data which we written inside body is showed in webpage. Mostly all tags which are helpful to show data or information on screen is written under body tag.
- Here, as we see inside body we create a div and writes some text inside that.
- Now, as we see in our style tag that we apply some CSS to our division in which we give some predefind values and some custom values. Predefind means which we discuss above whereas custom is whose values we can change.
- Now, with help of this example we learn one more thing that is we can apply custom values to our all four borders. We will also learn about this later in next tutorial. We hope you easily understand about border thickness very well.
Conclusion :-
At last, in conclusion, here we can say that with the help of this article we are able to understand about border thickness in CSS.
I hope this tutorial on border thickness CSS helps you and the steps and method mentioned above are easy to follow and implement.
About Riya
