Закругленные углы при помощи CSS3

Posted Tue, 04/20/2010 - 22:58
Закругленные углы при помощи CSS3

World Wide Web Consortium (W3C) дала нам возможность делать закругленные углы у блоков без помощи изображений, правда работает на данный момент только в 2х браузерах - Firefox 3.5+ и Safari 3.0. В общем, меньше базару, больше делов :) Вот пример:

{ -moz-border-radius:15px; } /* Делает углы в 15 пикселей в браузере FireFox */
{ -webkit-border-radius:15px; } /* также углы в 15px в Safari */

А что делать если нам надо задать округленность одному из четырех углов?
- Ответ прост! для этого существуют параметры topleft, topright, bottomleft, bottomright - для Firefox, пример:

{ -moz-border-radius-topleft:15px; } /* Верхний левый угол закруглен в 15px */
{ -moz-border-radius-topright:15px; } /* Верхний правый угол */
{ -moz-border-radius-bottomleft:15px; } /* Нижний левый угол */
{ -moz-border-radius-bottomright:15px; } /* Нижний правый угол */

Для Safari немного иной метод:

{ -webkit-border-top-left-radius:15px; } /* Верхний левый угол 15px в Safari */
{ -webkit-border-top-right-radius:15px; } /* Верхний правый */
{ -webkit-border-bottom-left-radius:15px; } /* Нижний левый */
{ -webkit-border-bottom-right-radius:15px; } /* Нижний правый */

Вот в принципе и все, эксперементируйте сами!