CSS
Cascading Style Sheet
Numerous properties are used to set width of borders. Four properties set the width for specific borders.
Example
<html>
<head>
<title>Skillpundit</title>
<style type="text/css"> .text1
{
border-style: solid;
border-color: gray;
border-width: 7px;
}
</style> </head>
<body>
<h3 class="text1">www.skillpundit.com</h3>
</body> </html>
<head>
<title>Skillpundit</title>
<style type="text/css"> .text1
{
border-style: solid;
border-color: gray;
border-width: 7px;
}
</style> </head>
<body>
<h3 class="text1">www.skillpundit.com</h3>
</body> </html>
Output
www.skillpundit.com
Border-Thick
<html>
<head>
<title>Skillpundit</title>
<style type="text/css"> .text2
{
border-style: solid;
border-width: thick;
}
</style> </head>
<body>
<h3 class="text2">www.skillpundit.com</h3>
</body> </html>
<head>
<title>Skillpundit</title>
<style type="text/css"> .text2
{
border-style: solid;
border-width: thick;
}
</style> </head>
<body>
<h3 class="text2">www.skillpundit.com</h3>
</body> </html>
Output
www.skillpundit.com
Border-Thin
<html>
<head>
<title>Skillpundit</title>
<style type="text/css"> .text3
{
border-style: solid;
border-width: thin;
}
</style> </head>
<body>
<h3 class="text3">www.skillpundit.com</h3>
</body> </html>
<head>
<title>Skillpundit</title>
<style type="text/css"> .text3
{
border-style: solid;
border-width: thin;
}
</style> </head>
<body>
<h3 class="text3">www.skillpundit.com</h3>
</body> </html>
Output
www.skillpundit.com
Border-Medium
<html>
<head>
<title>Skillpundit</title>
<style type="text/css"> .text4
{
border-style: solid;
border-color: rgb(201, 76, 76);
border-width: medium;
}
</style> </head>
<body>
<h3 class="text4">SkillPundit is the best place to gain knowledge which includes skills like programming, designing, problem solving, general information about our country, reasoning, mental ability etc. SkillPundit is world's best platform to show your talent.</h3>
</body> </html>
<head>
<title>Skillpundit</title>
<style type="text/css"> .text4
{
border-style: solid;
border-color: rgb(201, 76, 76);
border-width: medium;
}
</style> </head>
<body>
<h3 class="text4">SkillPundit is the best place to gain knowledge which includes skills like programming, designing, problem solving, general information about our country, reasoning, mental ability etc. SkillPundit is world's best platform to show your talent.</h3>
</body> </html>
Output
SkillPundit is the best place to gain knowledge which includes skills like programming, designing, problem solving, general information about our country, reasoning, mental ability etc. SkillPundit is world's best platform to show your talent.
Note: Width of the top and bottom borders to 10px and Width of the left and right borders to 1px
Example
<html>
<head>
<title>Skillpundit</title>
<style type="text/css"> .text4
{
border-style: double;
border-width: 10px 1px;
}
</style> </head>
<body>
<h3 class="text4">SkillPundit is the best place to gain knowledge which includes skills like programming, designing, problem solving, general information about our country, reasoning, mental ability etc. SkillPundit is world's best platform to show your talent.</h3>
</body> </html>
<head>
<title>Skillpundit</title>
<style type="text/css"> .text4
{
border-style: double;
border-width: 10px 1px;
}
</style> </head>
<body>
<h3 class="text4">SkillPundit is the best place to gain knowledge which includes skills like programming, designing, problem solving, general information about our country, reasoning, mental ability etc. SkillPundit is world's best platform to show your talent.</h3>
</body> </html>
Output
SkillPundit is the best place to gain knowledge which includes skills like programming, designing, problem solving, general information about our country, reasoning, mental ability etc. SkillPundit is world's best platform to show your talent.
