'Chrome button border looks bigger when I change border radius, but dev tools "calculated" values don't make sense

I cannot seem to understand how Chrome is calculating and/or displaying buttons with different border-radius and border-width values in CSS. This all started when I set the border-radius to 5px in CSS, and that was the only rule I added for that button. I noticed that the border width also seemed to get wider. I built a JSFiddle to show what I'm trying to figure out. It seems like button 1 has a wider border than button 2, but when I look at the calculated CSS values in Chrome's Developer Tools, it looks like they both say 2px.

Here's what's strange:

  • For button 1, why does Chrome seem to make the border thicker when I change the border radius?
  • For button 2, why does Chrome DevTools say the width is 2px when it certainly appears to be 1px? Also, why does Chrome say radius is 0px when it certainly appears to be rounded somewhat?
  • For button 3, why does Chrome change the border radius to be smaller when I change the border width to 1px. Also, why would button 2 and button 3 both say border radius is 0px despite the two buttons clearly have different radii on the page?
  • Button 4 shows, I think, that a button can be rendered just fine with a 5px border radius and a 1px border width (the latter of which I think is the default). So, I don't understand why Chrome would automatically make button 1's border thicker when I changed the border radius.

This all might be my own misunderstanding of Chrome's Developer Tools and what the calculated values are actually showing.

Overall, I guess I just want to understand if it is well understood how Chrome handles border radius and width, especially when you manually set only one or the other?

Am I missing something? Am I crazy?

Here is an image of what the four buttons look like.

Note: I tried to upload screenshots of the Developer Tools window to make it quicker for people to see, but StackOverflow wouldn't let me, saying that I was trying to upload pictures of the code without the actual code. Sorry.

<html>
    <head>
        <style>
            .rounded_button_1 {
                border-radius: 5px;
            }

            .rounded_button_3 {
                border-width: 1px;
            }

            .rounded_button_4 {
                border-radius: 5px;
                border-width: 1px;
            }
        </style>
    </head>
    <body>
        <button class="rounded_button_1">
            Button 1
        </button>
        <br><br>
        <button class="rounded_button_2">
            Button 2
        </button>
        <br><br>
        <button class="rounded_button_3">
            Button 3
        </button>
        <br><br>
        <button class="rounded_button_4">
            Button 4
        </button>
    </body>
</html>
cssgoogle-chrome


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions