How can I disable the rounding of buttons on a website through a Chromium browser?

Question

I'm looking for a way to disable the rounding of all buttons on a website through the developer console. Thus far, nothing seems to work. Can the button style be overridden across the entire script using Javascript?

Thanks in advance.

Answer 1

It's supposed to be something like this:

document.querySelectorAll("button").forEach(( b ) => {
    b.style.borderRadius = "0";
    b.style.borderEndEndRadius = "0";
    b.style.borderEndStartRadius = "0";
    b.style.borderTopLeftRadius = "0";
    b.style.borderTopRightRadius = "0";
    b.style.borderBottomRightRadiusRadius = "0";
    b.style.borderBottomLeftRadiusRadius = "0";
    b.style.borderCollapse = "separate";
});

document.querySelectorAll("a").forEach(( b ) => {
    b.style.borderRadius = "0";
    b.style.borderEndEndRadius = "0";
    b.style.borderEndStartRadius = "0";
    b.style.borderTopLeftRadius = "0";
    b.style.borderTopRightRadius = "0";
    b.style.borderBottomRightRadiusRadius = "0";
    b.style.borderBottomLeftRadiusRadius = "0";
    b.style.borderCollapse = "separate";
});

This code gets all buttons/a(s) in the html file then it loops foreach of them and it changes the borderRadius style to 0 "none", You can test b.style.backgroundColor = "red"; and it will changes the selected item in the querySelectorAll() background's color to red.

More information about document.querySelectorAll() here! Take a look on the Array.prototype.forEach() function in here !

Answer 2

Im not sure but i did example using vanillaJS for you , are you looking for something like this?

function disableRounding(){
var buttons = document.getElementsByTagName('button');
for (let button of buttons) {
    button.style.borderRadius = 0;
  };
};

function enableRounding(){
var buttons = document.getElementsByTagName('button');
for (let button of buttons) {
    button.style.borderRadius = '50%';
   };
};

.round-button {
    display:block;
    width:150px;
    height:50px;
    line-height:50px;
    border: 2px solid #f5f5f5;
    border-radius: 50%;
    color:#f5f5f5;
    text-align:center;
    text-decoration:none;
    background: #464646;
    box-shadow: 0 0 3px gray;
    font-size:20px;
    font-weight:bold;
}
.round-button:hover {
    background: #262626;
}

<button href="http://example.com" class="round-button" onclick="enableRounding()">Enable</button>
<button href="http://example.com" class="round-button" onclick="disableRounding()">Disable</button>