Здравствуйте. Сегодня я расскажу, как сделать закругленные края СSS. За закругленные края в css отвечаеть свойство border-radius. Итак, чтоб получить скругленные углы css свойсту border-radius задаем значения по тому же принципу, как у margin и padding (последовательность следующая: левый верхний-правый верхний-правый нижний-левый нижний углы) наглядно смотрите на рисунке
Поддерживают 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:
Свойства 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
7 Response Comments
а можно ли сделать закругленные края фото?
конечно, задаете картинку как background слоя
.test-3{border-radius: 10px; border:none!important;background: url(«../images/bg.png»;}
или пишите стиль для картинок слоя
.test-3 img {border-radius: 10px;border:none!important;}
Очень полезная информация. Кстати, кому интересно, можно почитать о психологическом восприятии и истории скругленных углов на netcoding.ru/articles/web-design/skruglenniye-ugli-v-dizayne/
За українську версію спасибі!
Ми зробили схожий сервіс для генерування CSS3 Border-radius
если сами сделали то молодцы, но похоже что скрипт стырян …
а как закруглить углы у таблицы?