Avatar for Username

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

Wo archive tread sia. Meɖekuku bia biabia yeye ne ehia kpeɖeŋu.

Styling the <meter> tag

  • 2 ŋuɖoɖowo
  • 1 masɔmasɔ sia le esi
  • 90 views
  • Nuɖoɖo mlɔetɔ Admin

Admin
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?

Hi! I have a problem with styling the meter tag. Read this article but there is no mention of this. [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter 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?
Screen ƒe photowo kpe ɖe eŋu

cor-el trɔe

Ŋuɖoɖo si wotia

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;
}
Xle ŋuɖoɖo sia le goya me 👍 1

All Replies (2)

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

Ɖɔɖɔɖo si wotia

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;
}
Admin
Admin Biabia la
more options

That's it!

Thanks for the help. :)