Как сделать закругленные углы css
Сегодня я расскажу и покажу как сделать закруглённые углы при помощи css. Ещё совсем недавно закруглённые углы на сайтах делались исключительно при помощи картинок, то есть нужно было заранее подготовить картинку в фотошопе или другой аналогичной программе, закруглить для неё углы так как вам нужно, а потом разместить её на сайте.
Навигация по статье:
Но к счастью эти времена остались позади и сегодня сделать закруглённые углы для любого блока, картинки, кнопки или таблицы можно при помощи одной строчки CSS кода.
Причём вы можете закруглить углы как все сразу, так и только некоторые, да ещё и регулировать для них радиус закругления.
Как, например, здесь:
Круто, не правда ли?!
Всё это стало возможным благодаря CSS свойству border-radius.
Как закруглить углы для блока?
Предположим у вас на сайте есть блок с классом round-corner.
Для того чтобы этот блок было лучше видно я задам ему высоту, ширину и цвет фона при помощи CSS.
А теперь для того чтобы закруглить все углы этого блока нам достаточно приписать ему всего одну строку в CSS файле или прямо в коде страницы при помощи специальных тегов или атрибутов:
где 20рх – это радиус закругления угла (чем он больше – тем круглее угол)
И вот что мы получим в итоге:
Как закруглить углы картинки при помощи CSS?
Такой же фокус можно проделать и для картинки, кнопки и практически любого элемента на вашем сайте. Для того чтобы закруглить углы в CSS нужно либо прописать для этого элемента класс, для которого задано свойство border-radius, либо вычислить класс блока, внутри которого расположен нужный элемент (в нашем случае это картинка), а затем прописать тег этого элемента, после чего в фигурных скобках прописать ему всё тоже CSS свойство border-radius.
Создаем закруглённые уголки с помощью CSS 3
Одно из наиболее ожидаемых свойств CSS3, несомненно, свойство border-radius. С помощью свойства border-radius можно создавать, такие популярные в последнее время, прямоугольники с закругленными углами, исключительно средствами CSS, не используя никаких изображений.
Кроссбраузерная совместимость.
К сожалению, CSS3 еще не поддерживается всеми браузерами. Свойство border-radius поддерживается Firefox (начиная с версии 1.0), Safari (с версии 3.1) и Chrome (с самой первой версии), но оно не поддерживается Internet Explorer и Opera (будет реализовано в Opera 10).
Так как CSS3 еще не является стандартом, Вы должны добавлять префикс для свойства border-radius чтобы оно работало в браузерах, которые его поддерживают. Если Вы хотите, чтобы оно работало в Firefox необходимо написать в стилях -moz-border-radius, для Safari/Chrome это свойство будет иметь такой вид — -webkit-border-radius.
Имейте ввиду, что, хотя Firefox, Сафари и Хром поддерживают это свойство, они реализуют его немного различными методами. Я сначала покажу Вам, как оно реализовано Firefox и затем объясню различия в Safari и Chrome.
Для начала создадим простой блок, для которого мы и будем применять свойство border-radius.
<body>
<div ></div>
</body>
В CSS зададим для него высоту, ширину и цвет фона:
#box <
width:590px;
height:100px;
background-color:#6B86A6; >
Добавляем свойство border-radius:
Свойство border-radius объявляется подобно свойствам margin и padding. Вы можете использовать как краткую запись этого свойства для всех четырёх углов прямоугольника, так и отдельно для каждого угла. При краткой записи указывается одно значение для каждого угла:
#box <
-moz-border-radius: 20px;
>
Теперь все четыре угла будут иметь радиус 20px: 
Вы также можете указать два значения, первое из которых будет определять радиус для верхнего левого и нижнего правого угла, а второе — для верхнего правого и нижнего левого:
#box <
-moz-border-radius:20px 40px;
>
Если Вы указываете три или четыре значения, они будут применяться в следующем порядке — верхний левый угол, верхний правый угол, нижний правый угол и нижний левый угол.
#box <
-moz-border-radius:10px 20px 30px 40px;
>
Объявляем свойство border-radius для каждого угла
- moz-border-radius-topleft для верхнего левого угла;
- moz-border-radius-topright для верхнего правго угла;
- moz-border-radius-bottomright для нижнего правого угла;
- moz-border-radius-bottomleft для нижнего левого угла;
Горизонтальный и вертикальный радиус
Это свойство можно также использовать для создания углов в виде четверти эллипса. Для этого необходимо добавить второе значение для нужного угла:
#box <
-moz-border-radius-topleft: 30px 15px;
> 
Как Вы можете видеть на картинке верхний левый угол имеет немного «скошенный» вид. Это потому что эти два значения определяют горизонтальный и вертикальный радиус соответственно. Когда используется одно значение браузер интерпретирует его как для горизонтального, так и для вертикального радиуса.
При краткой записи этого свойства значения для горизонтального и вертикального радиуса разделяются слэшем:
#box <
-moz-border-radius: 30px / 15px;
>
#box <
-moz-border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px;
>
Использование свойства border-radius в Safari и Chrome.
- -webkit-border-top-left-radius для верхнего левого угла;
- -webkit-border-top-right-radius для верхнего правого угла;
- -webkit-border-bottom-right-radius для нижнего правого угла;
- -webkit-border-bottom-left-radius для нижнего левого угла;
Этот код не будет работать в Safari и Chrome:
#box <
-webkit-border-radius: 10px 20px 30px 40px;
>
Правильный код будет выглядеть так:
#box <
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 40px;
>
Горизонтальный и вертикальный радиус в Safari и Chrome.
В Safari и Chrome можно также указывать горизонтальный и вертикальный радиус:
#box <
-webkit-border-top-left-radius: 30px 15px;
>
При краткой записи можно указывать горизонтальный и вертикальный радиус для всех углов прямоугольника только если эти значения одинаковые для каждого угла. Также не требуется использование слэша:
#box <
-webkit-border-radius: 30px 15px;
>
Как закруглить углы в CSS
Вы, конечно же, знаете, что в HTML-ле нет возможности создавать закругленные углы. Но необходимость в них велика. Поэтому верстальщики выдумали не один способ, чтобы закруглить угол, и самый простой и популярный из них, когда в крайние ячейки таблицы сайта помещались картинки углов.
По некоторым наблюдениям почти в 80% дизайнерских работ используются плавные линии. Закругленный угол тоже считается плавной линией. Получается, что визуальная мягкость и красота закругленного угла более востребована, нежели жесткость прямого угла, которая нужна лишь в определенных случаях.
К слову говоря, специалисты по дизайну жилых помещений считают, что закругленные углы помогают визуально расширить пространство комнаты. Пожалуй, этот визуальный фокус вполне применим и к сайтам.
Поэтому сегодня мы будем учиться закруглять углы при помощи CSS!
Для примера вот у нас есть такая кнопка:
Код кнопки (HTML):
Чтобы закруглить углы, пропишите в CSS « border-radius »:
Результат будет таким:
Как видите, закруглились четыре угла на 20 px .
Если нужно закруглить, к примеру, только один, два или три угла, тогда нужно прописать к каждому углу параметры:
Начинаете с левого верхнего угла и по часовой.
В результате вы увидите:
Закруглилось два верхних угла.
Если по каким-то причинам закругление не происходит, есть вероятность того, что ваш браузер ну очень сильно постарел …
Чтобы избежать такого, добавьте border-radius под популярные браузеры:
… и все заработает.
А сейчас парочка примеров того, что можно сотворить, используя закругление углов.