Geek Answers Handbook

Fuzzy outline on the shape button when using a background image with a radius of 20px

For some reason, exclusively on Windows machines, on the “Login” button on this page I get this strange fuzzy outline that is hard to explain, so see for yourself:

http://zis.smartlyedu.com/login

It does not appear on Mac OS, but it works on Windows.

Has anyone come across this before?

Here is the CSS for the button:

    div.input-submit input{
    outline:none;
    font-family:Helvetica, Arial, sans-serif;
    width:100px;
    height:35px;
    color:#fff;
    font-weight:normal;
    float:right;
    font-size:18px;
    text-shadow:#000 1px 1px 1px;
    border:1px solid #fff;
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
    -o-border-radius:20px;
    -ms-border-radius:20px;
    -khtml-border-radius:20px;
    border-radius:20px;
    background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,0.2)));
    background:-webkit-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2));
    background:-moz-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2));
    background:-o-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2));
    background:-ms-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2));
    background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.2));
    background-color:#31639d;
    font-weight:bold;
    border:1px solid #fff
    }
+5
source share
1 answer

This solution was found in the comments on the original post.

Alain, : none , , . , CSS , , . , CSS.

:

, , , 1px 20px. , Windows freaks out, . , , : ;. , . !

+1

More articles:


All Articles