Breaking News: Grepper is joining You.com. Read the official announcement!

how to set thickness of hr in html

Add Answer

Tired Tortoise answered on September 22, 2021 Popularity 10/10 Helpfulness 4/10

answer how to set thickness of hr in html

related css hr thickness

related how to change thickness of hr tag

how to set thickness of hr in html

Comment

hr {
  height: 4px;
}

Popularity 10/10 Helpfulness 4/10 Language css

Source: Grepper

Tags: css html set thickness

Link to this answer
Share Copy Link

Contributed on Sep 22 2021

Tired Tortoise

0 Answers Avg Quality 2/10

Closely Related Answers

css hr thickness

Comment

hr {
  height: 5px;
  border: none;
  background-color: black;
}

Popularity 10/10 Helpfulness 10/10 Language css

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on Oct 21 2021

Funny Finch

0 Answers Avg Quality 2/10

how to change thickness of hr tag

Comment

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible"
          content="ie=edge" />
    <title>Document</title>
    <style>
    div {
        width: 200px;
    }
     
    body {
        background-color: #f0f0f0;
        width: 80px;
        float: center;
    }
     
    hr.class-1 {
        border-top: 10px solid #8c8b8b;
    }
     
    hr.class-2 {
        border-top: 3px double #8c8b8b;
    }
     
    hr.class-3 {
        border-top: 1px dashed #8c8b8b;
    }
     
    hr.class-4 {
        border-top: 1px dotted #8c8b8b;
    }
     
    hr.class-5 {
        background-color: #fff;
        border-top: 2px dashed #8c8b8b;
    }
     
    hr.class-6 {
        background-color: #fff;
        border-top: 5px dotted #8c8b8b;
    }
    </style>
</head>
 
<body>
    <div>
        <hr class="class-1" />
        <br />
        <hr class="class-2" />
        <br />
        <hr class="class-3" />
        <br />
        <hr class="class-4" />
        <br />
        <hr class="class-5" />
        <br />
        <hr class="class-6" />
    </div>
</body>
</html>

<!--<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport"
		content="width=device-width,
				initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible"
		content="ie=edge" />
	<title>Document</title>
	<style>
	div {
		width: 200px;
	}
	
	body {
		background-color: #f0f0f0;
		width: 80px;
		float: center;
	}
	
	hr.class-1 {
		border-top: 10px solid #8c8b8b;
	}
	
	hr.class-2 {
		border-top: 3px double #8c8b8b;
	}
	
	hr.class-3 {
		border-top: 1px dashed #8c8b8b;
	}
	
	hr.class-4 {
		border-top: 1px dotted #8c8b8b;
	}
	
	hr.class-5 {
		background-color: #fff;
		border-top: 2px dashed #8c8b8b;
	}
	
	hr.class-6 {
		background-color: #fff;
		border-top: 5px dotted #8c8b8b;
	}
	</style>
</head>

<body>
	<div>
		<hr class="class-1" />
		<br />
		<hr class="class-2" />
		<br />
		<hr class="class-3" />
		<br />
		<hr class="class-4" />
		<br />
		<hr class="class-5" />
		<br />
		<hr class="class-6" />
	</div>
</body>
</html>
-->

Popularity 9/10 Helpfulness 3/10 Language html

Source: www.geeksforgeeks.org

Tags: html

Link to this answer
Share Copy Link

Contributed on Oct 21 2022

Anshul Soni

0 Answers Avg Quality 2/10

how to change thickness of hr tag

Comment

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible"
          content="ie=edge" />
    <title>Document</title>
    <style>
    div {
        width: 200px;
    }
     
    body {
        background-color: #f0f0f0;
        width: 80px;
        float: center;
    }
     
    hr.class-1 {
        border-top: 10px solid #8c8b8b;
    }
     
    hr.class-2 {
        border-top: 3px double #8c8b8b;
    }
     
    hr.class-3 {
        border-top: 1px dashed #8c8b8b;
    }
     
    hr.class-4 {
        border-top: 1px dotted #8c8b8b;
    }
     
    hr.class-5 {
        background-color: #fff;
        border-top: 2px dashed #8c8b8b;
    }
     
    hr.class-6 {
        background-color: #fff;
        border-top: 5px dotted #8c8b8b;
    }
    </style>
</head>
 
<body>
    <div>
        <hr class="class-1" />
        <br />
        <hr class="class-2" />
        <br />
        <hr class="class-3" />
        <br />
        <hr class="class-4" />
        <br />
        <hr class="class-5" />
        <br />
        <hr class="class-6" />
    </div>
</body>
</html>

<!--<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport"
		content="width=device-width,
				initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible"
		content="ie=edge" />
	<title>Document</title>
	<style>
	div {
		width: 200px;
	}
	
	body {
		background-color: #f0f0f0;
		width: 80px;
		float: center;
	}
	
	hr.class-1 {
		border-top: 10px solid #8c8b8b;
	}
	
	hr.class-2 {
		border-top: 3px double #8c8b8b;
	}
	
	hr.class-3 {
		border-top: 1px dashed #8c8b8b;
	}
	
	hr.class-4 {
		border-top: 1px dotted #8c8b8b;
	}
	
	hr.class-5 {
		background-color: #fff;
		border-top: 2px dashed #8c8b8b;
	}
	
	hr.class-6 {
		background-color: #fff;
		border-top: 5px dotted #8c8b8b;
	}
	</style>
</head>

<body>
	<div>
		<hr class="class-1" />
		<br />
		<hr class="class-2" />
		<br />
		<hr class="class-3" />
		<br />
		<hr class="class-4" />
		<br />
		<hr class="class-5" />
		<br />
		<hr class="class-6" />
	</div>
</body>
</html>
-->

Popularity 9/10 Helpfulness 2/10 Language html

Source: www.geeksforgeeks.org

Tags: html

Link to this answer
Share Copy Link

Contributed on Oct 21 2022

Anshul Soni

0 Answers Avg Quality 2/10

how to set thickness of hr in html

Contents

More Related Answers

how to set thickness of hr in html

Closely Related Answers

css hr thickness

how to change thickness of hr tag

how to change thickness of hr tag

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.