Can someone explain me why the top-left and bottom-left corners are displayed in this way:
using the following CSS:
form .form-field
{
height: 20px;
padding: 5px;
border: 1px solid #ccc;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
both input field and the textarea have “form-field” class. (same behavior in Safari, Chrome and Firefox)
Like T.J. noted, something has a red background on it that’s higher up in your DOM tree. Adding the border radius to your corners is exposing that. Use your browser’s inspector to find it. Should be a quick fix.