Здравствуйте. Сегодня я расскажу, как сделать закругленные края СSS_. За закругленные края в css отвечаеть свойство border-radius. Итак, чтоб получить скругленные углы css свойсту border-radius задаем значения по тому же принципу, как у margin и padding (последовательность следующая: левый верхний-правый верхний-правый нижний-левый нижний углы) наглядно смотрите  на рисунке

Поддерживают border-radius браузеры вот таких версий:

Теперь несколько примеров  как сделать закругленные углы css:

 body {background:#fff;border:#000000 1px;}/*цвет фонаб толшина и цвет рамки*/
.test-1,.test-2,.test-3,.test-4,.test-5,.test-6{width:300px;height:40px;color:#000000;font-size:12px;margin:10px;padding:10px;border:1px solid #006;}/*общие стили слоев*/
.test-1{border-radius: 10px;}/*это означает что все углы заокруглены на 10px, если все значения одинаковы, синтаксих CSS разрешает написать его 1 раз,но для понимания вот border-radius: 10px;=border-radius: 10px 10px 10px 10px; */
.test-2{border-radius: 10px 0 0 0;}/*закруглен лиш левый вехний угол один угол*/
.test-3{border-radius: 10px 0 10px 0;border:none!important; background:#009900;}/*закруглены левый вехний и правый нижний уголы, если рамка остутсвует, свойство border-radius заокруглит background */
.test-4{border-radius: 10px 0 0 50px;}/*заокгурляя углы можно создавать элиппсы*/
.test-5{border-radius: 10em/1em;}/*заокгурляя углы можно создавать элиппсы*/
.test-6{border-radius:13em 0.5em/1em 0.5em;}/*заокгурляя углы можно создавать элиппсы*/

Плагин вставки кодов, на отрез отказался вставлять код HTML,  по-этому код HTML я покажу вам рисунком:

У нас получиться закругленные углы css:

Свойства border-radius можна задавать еще такими значениями:

  border-bottom-left-radius:10px; /*левый нижний угол*/
border-bottom-right-radius:10px; /* правый нижний угол*/
border-top-left-radius:10px; /*левый верхний  угол*/
border-top-right-radius:10px; /* правый верхний  угол*/

Замечание по браузерам:

Chrome до версии 4.0, Safari до версии 5.0, iOS используют нестандартное свойство -webkit-border-radius.

Firefox до версии 4.0 использует нестандартное свойство -moz-border-radius.

Вы наверное подумали что на этом, и статье конец, а не тут то было. Далее я раскажу вам про замечательный онлайн сервис border-radius.com, который позволит сделать скругленные углы css за считаные секунды. Пользоваться сервисом очень просто: перед вами будем прямоугольник, и поля для ввода значения округление краев, все интуитивно понятно. После того как вы ввели значение в прямоугольнике мгновенно генерируется CSS код который вы можете скопировать себе в стиль. Смотрите ниже пример на рисунке

Читайте также статью Как сделать градиентный background (фон) с помощью 1px рисунка и с помощью только CSS 3 и про полезный онлайн сервис colorzilla.com