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

как сделать закругленные края css

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

Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 1.0+ 10.5+ 3.0+ 1.0+ 2.1+ 1.0+

Тепер кілька прикладів, як зробити закруглені краї 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

І ось що у нас вийшло:

делаем закругленные края в 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 код, який ви можете скопіювати собі в стиль. Дивіться нижче приклад на малюнку:

сделать закругленные края СSS

Читайте також статтю Як зробити градієнтний background (фон) за допомогою 1px малюнка і з допомогою тільки CSS 3