Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Styling the <meter> tag

  • 2 replies
  • 1 has this problem
  • 12 views
  • Last reply by Admin

more options

Hi!

I have a problem with styling the meter tag. Read this article but there is no mention of this. Styling the <meter> tag

I want the meter to have round edges so I tried putting border-radius on meter::-webkit-meter-optimum-value but it didn't work. Putting it on the meter::-moz-meter-bar gave me round edges on the filling (see the photo) but the background still has 90° edges.

Does anyone know how can those background edges be styled?

Attached screenshots

Modified by cor-el

Chosen solution

Try to set the radius on both meter and the meter-bar.

meter{
  background: #0f0;
  border-radius:2rem;
}

meter::-moz-meter-bar {
  background: #f00;
  border-radius:2rem;
}
Read this answer in context 👍 1

All Replies (2)

more options

Chosen Solution

Try to set the radius on both meter and the meter-bar.

meter{
  background: #0f0;
  border-radius:2rem;
}

meter::-moz-meter-bar {
  background: #f00;
  border-radius:2rem;
}

Helpful?

more options

That's it!

Thanks for the help. :)

Helpful?

Ask a question

You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.