Menu
How can I set the -moz-border-radius with pure JavaScript (no jQuery, no plugins etc)?
document.getElementById('id')
259
The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.
CSS Syntax border-radius: 1-4 length|% / 1-4 length|%|initial|inherit; Note: The four values for each radius are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right.
If there are contents within the div that has the curved corners, you have to set overflow: hidden because otherwise the child div's overflow can give the impression that the border-radius isn't working.
Border radius tokens are used to give sharp edges a more subtle, rounded effect. They use rem units so they scale with the base font size. The pixel values displayed are based on a 16px font size.
Try:
document.getElementById('id').style.borderRadius = '1em'; // w3c
document.getElementById('id').style.MozBorderRadius = '1em'; // mozilla
But why not do it in a stylesheet?
191
var myElementStyle = document.getElementById('id').style;
myElementStyle.borderRadius = '1em'; // standard
myElementStyle.MozBorderRadius = '1em'; // Mozilla
myElementStyle.WebkitBorderRadius = '1em'; // WebKit
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
