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

how to change thickness of hr tag

Add Answer

Anshul Soni answered on September 22, 2021 Popularity 9/10 Helpfulness 2/10

answer how to change thickness of hr tag

related css hr thickness

related how to set thickness of hr in html

related how to change thickness of hr tag

related change hr tag width css

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 thickness

Link to this answer
Share Copy Link

Contributed on Oct 21 2022

Anshul Soni

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 set thickness of hr in html

Comment

hr {
  height: 4px;
}

Popularity 10/10 Helpfulness 4/10 Language css

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on Sep 22 2021

Tired Tortoise

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

change hr tag width css

Comment

.divider
    max-width: min(600px, 100vw)

Popularity 10/10 Helpfulness 3/10 Language css

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on Jun 10 2022

Himanshu Jangid

0 Answers Avg Quality 2/10

how to change thickness of hr tag

Contents

More Related Answers

how to change thickness of hr tag

Closely Related Answers

css hr thickness

how to set thickness of hr in html

how to change thickness of hr tag

change hr tag width css

Grepper

Documentation

Social

Legal

Contact

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