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

Mulongo oyo etiyamaki na archive. Tuna motuna mosusu soki osengeli na lisalisi

Styling the <meter> tag

  • 2 biyano
  • 1 eza na nkokoso oyo
  • 1 view
  • Eyano yasuka ya 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?
Bafoto sur écran jointes

Ezalaki modifié na cor-el

Solution eye eponami

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;
}
Tanga eyano oyo ndenge esengeli 👍 1

All Replies (2)

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

Solution eye oponami

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 Nkolo motuna
more options

That's it!

Thanks for the help. :)