Граница не отображается, если в Chrome установлен радиус границы 15 - PullRequest
Новая
       18

Граница не отображается, если в Chrome установлен радиус границы 15

1 голос
/ 02 декабря 2011

У меня есть следующий код: HTML: 

<div id="login" class="transparent-div login_leaf_class">

<input class="pointer login_fields_button" id="submit_button" type="submit" title="SUBMIT" value="SUBMIT"/>
</div>

CSS: 

.login_leaf_class
{
    border:solid #000 !important;
     border-top-left-radius:70% 60% ;
    border-bottom-right-radius:70% 60%;
    -moz-border-top-left-radius:70% 50%;
    -moz-border-bottom-right-radius:70% 50%;
}
div#login
{
    position:relative;
    padding:10px;
    overflow:hidden;
    margin-top:10%;
    margin-right:5%;
    color:#0000;
    float:right;
    width:300px;
    height:200px;
    font-weight:900;
    background:#FFB3FF;
    background:rgba(255,179,255,0.8);
}
.login_fields_button
{
    float:right;
    display:inline;
    background:#003300;
    color:#FFF;
    font-weight:900;
    padding:4px;
    width:100px;
    height:50px;
    border-radius:0 !important;
     border-top-left-radius:99.9% 100% !important;
    border-bottom-right-radius:99.9% 100% !important;
    -moz-border-top-left-radius:99.9% 100% !important;
    -moz-border-bottom-right-radius:99.9% 100% !important;
    border:solid #fff !important;
}

Проблема в том, что в FireFox кажется, что граница идет прямо. Все работало нормально, пока у меня тоже был chrome14, но недавно, когда я обновился до chrome 15, граница появилась только в 2 углах. Смотрите следующие скриншоты: This is normal scenario This is how it looks in chrome 15 Что мне здесь делать? Это ошибка? http://jsfiddle.net/uMYfp/1/

1 Ответ

1 голос
/ 02 декабря 2011

Если вы дадите ему border-radius 4 пикселя или более, это сработает.

Демо

Кроме того, вам не нужны эти !important s, это плохая практика.

...