2014-02-20

Как закруглить углы css

border-rdius css3
CSS3 позволяет вебмастеру закруглять углы. В этой статье вы увидите всевозможные эффекты, которых можно добиться с помощью этого свойства.
Перед изучением закругления углов в css, рекомендую ознакомиться с предыдущими уроками по теме:
Границы css и  отступы - margin и padding.

border-radius – универсальное свойство, которое позволяет добиться скругления углов рамки элемента. Это свойство, однако, работает только в современных браузерах.
Для того, чтобы закругление работало и в некоторых старых версиях браузеров, используют специальные приставки:
-webkit-border-radius Для браузеров Chrome вплоть до 4.0, Safari до 5.0, iOS
-moz-border-radius Firefox до 4.0
Самая большая проблема с border-radius возникает в IE (работает с 9 версии), в Opera – c 10.5.
border-radius указывают для каждой стороны границы:
свойство значение радиус скругления
border-top-right-radius верхнего правого угла
border-bottom-right-radius нижнего правого угла
border-bottom-left-radius нижнего левого
border-top-left-radius верхнего левого
border-radius универсальное
Значения border-radius:
  1. пиксели,
  2. проценты от ширины блока,
  3. em,
  4. значения могут быть заданы через слеш (  /  ). Первое значение (до слеша) задает радиус для ширины, а второе  - для высоты блока.
Пример:
<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>border-radius</title>
  </head>
  <body>
  <style>
  div {width: 84px;
  padding: 5px;
  background: #ffcecf;
  border: 1px solid black;
  border-radius: 15px;  
  }
</style>
<div>border radius
   
           </div>
           </body>
  </html>
Результат:
border-radius
Для того, чтобы этот код работал в старых вервиях Chrome и Firefox дублируем свойства, прописывая их с приставками -webkit и –moz:
border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
Пример задания неравномерного закругления углов:
закруглить уголки в css
border-radius: 25px/5px;
Сокращенная запись border-radius: значения указываются через пробел или слеш. Возможно указание /*
  1. одного значения – в этом случае правило распространяется на весь блок. Пример:
    2014-02-20_19-53-53 border-radius: 15px;
  2. двух – первое число указывает радиус закругления для верхнего левого и нижнего правого, а второе – для верхнего правого и нижнего левого. Пример:
    border radius углы border-radius: 25px 5px;
  3. трех – первое – для верхнего левого, второе – для верхнего правого и нижнего левого и третье – для нижнего правого:
    border radius border-radius:25px 5px 10px;
  4. четырех – для каждого угла в отдельности, начиная с верхнего левого и далее по часовой стрелке. Схема:
    схема закругления углов
    Пример:
    border-radius border-radius:25px 5px 10px 1px;
Для тех, кто не любит писать коды вручную, есть генератор для закругления углов css.
Вам может также понадобиться генератор закругления уголков изображения.



1 комментарий :

Анонимный комментирует...

ещё генератор css border-radius: http://finego.ru/tools/border-radius-generator

Отправить комментарий

Комментарии, содержащие ненормативную лексику, спам, оскорбления, публиковаться не будут. Ели вы хотите опубликовать код в комментарии, то воспользуйтесь encoder HTML