However, as you can see, the corners on the right side of the image are not properly rounded, but the left side corners are. The CSS code looks like this: #articleimage { float:left; padding-right: 10px; padding-bottom: 1px; width: 400px; border-radius:20px; } I've determined that the issue is caused by the padding to the right, but I require

The order of border-radius definition is the key to get the desired shape. The shorthand is applied top-left to bottom-left, clockwise. .shape { width: 397px; height: 25px; background-color: rgba (53, 92, 175, 0.6); border-radius: 0 12.5px 12.5px 25px; } I updated my answer to make it more obvious what happens. ^{1 Answer. Sorted by: 50. You just need to add overflow:hidden; to the parent element with the border-radius property. Explanation : The issue is that the flexbox items are overflowing the parent element and therefore, the border radius doesn't apply on the items. To prevent them from overflowing their parent, you need to add overflow:hidden; to} The version I had working is: input { -webkit-appearance: none; } In some webkit browser versions, you may also be faced with the border-radius still being in place. Reset with the following: input { -webkit-border-radius:0; border-radius:0; } Gu4dFn.