CSS3 закругленные углы - только граница закруглена, внутренняя рамка все еще квадратная - PullRequest
3 голосов
/ 13 января 2012

Я больше нигде не видел этот вопрос, надеюсь, кто-нибудь может помочь. У меня есть контейнер с толстой рамкой. Я надеялся, что, когда я закруглю края, все края закругятся, но закруглилась только граница, оставив оригинальный квадрат квадрата. Я не хочу использовать изображение, я хочу сохранить его чистым CSS. Заранее спасибо! :)

#dashboard {
margin: 0 auto 53px;
max-width: 100%;
background-color: white;
background-radius: 10px;
border: 30px solid black;
padding: 0px 20px 0px 20px;

border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;

-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;

-moz-border-top-left-radius: 0px;
-moz-border-top-right-radius: 0px;
-moz-border-bottom-left-radius: 10px;
-moz-border-bottom-right-radius: 10px;
}

1 Ответ

3 голосов
/ 13 января 2012

Используйте два вложенных элемента div, оба округленных. Имитация границы с отступом на обертке.

Вот скрипка

...