Example 1: In this example, we will set the color of progress bar.
<!DOCTYPE html>
<html>
<head>
<title>
How to Set Background Color of
Progress Bar using HTML and CSS?
</title>
<style>
/* For Firefox */
progress::-moz-progress-bar {
background: green;
}
/* For Chrome or Safari */
progress::-webkit-progress-value {
background: green;
}
/* For IE10 */
progress {
background: green;
}
</style>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h4>
Set Background Color of Progress
Bar using HTML and CSS
</h4>
<progress value="40" max="100"></progress>
</body>
</html>
<!DOCTYPE html> <html> <head> <title> How to Set Background Color of Progress Bar using HTML and CSS? </title> <style> /* For Chrome or Safari */ progress::-webkit-progress-bar { background-color: #e82020; } progress::-webkit-progress-value { background-color: #fc3e26 !important; } /* For Firefox */ progress { background-color: #eee; } progress::-moz-progress-bar { background-color: #962d03 !important; } /* For IE10 */ progress { background-color: #eee; } progress { background-color: #f62922; } </style> </head> <body> <h1 style="color:#b14d18;"> BAJARANGI SOFT </h1> <h4> Set Background Color of Progress Bar using HTML and CSS? </h4> <progress value="40" max="100"></progress> </body> </html>