Dark background overflows rounded button corners in CSS - css

Question

The problem is when I set black button background, white color, white 4px border and then border-radius say 5px the black pieces appear in the corners of the button. It happens with <input> and <button> elements. <div> tags don't suffer from it.
Is it normal and does somebody know how it could be fixed?
CodePen
HTML:
<div id=a>
<div id=b>Button</div>
<br>
<input id="but1" type="button" value="Button" />
<button id="but2">Button</button>
</div>
CSS:
div#a {
background:rgb(255, 250, 204);
width:200px;
height:120px;
padding:10px;
}
div#b {
border: 4px solid white;
padding: 5px;
background: black;
width: 70px;
color:white;
border-radius: 5px;
text-align:center;
}
#but1 {
border: 4px solid yellow;
padding: 5px;
background: black;
width: 70px;
color:white;
-moz-border-radius: 5px;
border-radius: 5px;
text-align:center;
}
#but2 {
border: 4px solid white;
padding: 5px;
background: black;
width: 70px;
color:white;
-moz-border-radius: 5px;
border-radius: 5px;
text-align:center;
}

Answer 1

Thank you for your answer, robjez.
Recently I've found almost the same solution. I used padding-box for the background-clip but with the background-color instead of background. Cause with the background property it only works when the background-clip is in the end of the rule. I guess it's because of the cascading inside CSS rules. And if I use background-color it works with any order of properties.
#but1 {
padding: 5px;
width: 70px;
border-radius: 5px;
color:white;
background-clip:padding-box;
background-color: black;
border: 4px solid yellow;
}
CodePen

Answer 2

This is kind of browsers's bug, to avoid that you need to use background-clip, like so:
#but1 {
padding: 5px;
width: 70px;
background: black;
color:white;
border: 5px solid yellow;
border-radius: 5px;
/* Prevent background color leak outs */
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip:padding-box;
}
This is described here and here
Hope this will help