Как закруглить конкретные углы

закруглить конкретные углы

До сих пор мы с помощью одного правила добивались сгла-живания всех четырех углов. Но можно сделать так, чтобы закругленными были только определенные углы. Для этого используется следующий синтаксис.

Чтобы закруглить только левый верхний угол (рис. 1), можно написать такой код.

закругленные углы css

.box {
padding: 15px;
background: #e2e1d4;
border-top-left-radius: 8px;
-webkit-border-top-left-radius: 8px;
-moz-border-radius-topleft: 8px;
}

Обратите внимание, что для версии -moz- синтаксис немного не такой, как для CSS3 и -webkit-: topleft пишется слитно и располагается в самом конце.

Можно закруглить и другие углы, используя аналогичный синтаксис.

Чтобы закруглить только правый верхний угол (рис. 2), можно написать такой код.

закругленные углы css

border-top-right-radius: 8px;
-webkit-border-top-right-radius: 8px;
-moz-border-radius-topright: 8px;

Синтаксис для левого нижнего угла (рис. 3):

закругленные углы css

border-bottom-left-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-bottomleft: 8px;

Для правого нижнего угла (рис. 4):

закругленные углы css

border-bottom-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-bottomright: 8px;

Возможны любые комбинации: например, закругление левого верхнего и правого нижнего углов (рис. 5).

закругленные углы css

.box {
padding: 15px;
background: #e2e1d4;
border-top-left-radius: 8px;
border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-bottomright: 8px;
}

В общем и целом, это очень простой набор правил, благодаря которому использование закругленных углов перестает быть источником головной боли. При этом разметка становится компактной и эффективной, а всю «черную» работу берет на себя CSS.

Статью написали во время создания сайта http://glassgid.com/.