[SOLVED] Border Radius Issue in Safari

Border Radius Issue in Safari

I have an issue with border radius. I want border-radius to be applied to Safari browser as well. Here is how it looks in Chrome, IE: in Chrome and IE How it looks in Safari latest version: in Safari

CSS code I have used for that elemt:

    outline: 1px solid #e0e0e0;
    background: transparent;
    width: 440px;
    height: 38px;
    padding-left: 16px;
    border: transparent;
    border-radius: 6px;
    font-family: 'Poppins';
    font-size: 14px;
    font-weight: 400;
    color: #04111d;

I've tried to disable Safari browser style with this css, but don't helped:

input[type="text"] {
    -webkit-appearance: none;
}

Solution

I have solved the issue, it was pretty simple, feel myself like a fool. It is a problem with the outline property on Safari. If the targeted element already has a border-radius, the outline will not follow it: It will be a square.