CSS скругление углов

Скругленные углы в CSS

CSS скругление углов народными методами

или как сделать скругленные углы различными способами

Содержание страницы

  1. Скругленные углы в CSS для Firefox и Chrome
  2. Скругление углов в CSS для всех видов браузеров или как скруглить углы с помощью изображения, блока и CSS атрибутов
  3. Кросс-браузерное скругление углов в CSS или как скруглить углы с помощью изображения, таблицы и CSS атрибутов

Скругленные углы в CSS, пример:

<title>Скругление углов CSS методами</title>
<style type="text/css">
div {
border: 1px solid #434343;
padding: 10px;
background: #e3e3e3;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
width: 500px
}
</style>

</head>
<body>
<div>
Блок будет иметь скругленные углы, если страницу рассматривать в браузерах Firefox, Chrome или Safari.
</div>
</body>

Результат:

CSS ugly, zakruglenie

Посмотреть в новом окне: скругленные CSS углы

Атрибуты и значения

Еще один пример скругления углов CSS методами:

<title>Углы, скругленные CSS атрибутами</title>
<style type="text/css">
div {
border: 2px solid #434343;
padding: 47px;
background: #e3e3e3;
-moz-border-radius: 120px;
-webkit-border-radius: 120px;
width: 132px
}
</style>

</head>
<body>
<div>
Блок будет иметь скругленные углы, если страницу рассматривать в браузерах Firefox, Chrome или Safari.
</div>
</body>

Результат:

skruglennye ugly css

Посмотреть в новом окне: скругление углов CSS методами

Если вам нужно скруглить только левы углы или только правые углы, или соответственно верхние и нижние, то действительна следующая запись:

В момент написания урока, скругление углов не поддерживают web-браузеры Internet Explorer и Opera. Как будут развиваться события дальше пока не известно. Прийдут ли разработчики браузеров к единодушному решению на предмет введения border-radius — остается вопросом.

Чтобы вы могли скруглить углы уже сегодня, я подготовил для вас два примера кросс-браузерных методов скругления углов с помощью изображения и CSS.

Внимание! 03 Августа 2011 – Все в порядке! События развились как надо! Смотрите CSS3 способы закруглить углы, которые поддерживают все браузеры!

Скругленные CSS углы для всех видов браузеров

или как скруглить углы с помощью изображения и CSS атрибутов

Помню, мне было нужно скруглить углы для блока меню... Первое, что я сделал — это создал в графическом редакторе Photoshop два небольших изображения:

CSS ugly

Добавил следующий код:

<title>Углы, скругленные CSS методами с помощью изображения</title>
<style type="text/css">
div.menu {border:1px solid #bbb; border-bottom:none; border-top:none; width:204px; background-color:#f6f6f6}
</style>

</head>
<body>
<img src="../images/gtop.png" alt="" />
<div class="menu">
</div>
<img src="../images/gbot.png" alt="" />
</body>

В результате у меня получился вот такой контейнер:

ugly CSS, primer skruglenija

Если к стилевым описаниям блока прибавить height:100px, получится вот что:

CSS углы или производим скругление

Кросс-браузерное скругление углов в CSS

или как скруглить углы с помощью изображения, таблицы и CSS атрибутов

Данный метод скругления углов заключается в следующем: в одной из ячеек мы размещаем первое изображение, в другой – второе, а центральную ячейку форматируем при помощи CSS так, чтобы все правильно срослось.

Рассмотрим пример:

<title>Углы, скругленные CSS методами с помощью изображения</title>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<tr>
<td><img src="../images/gtop.png" alt="" /></td>
</tr>
<tr>
<td style="border-left:1px solid #bbbbbb; border-right:1px solid #bbbbbb; height:140px; background-color:#f6f6f6"></td>
</tr>
<tr>
<td><img src="../images/gbot.png" alt="" /></td>
</tr>
</table>
</body>

Результат:

Скругление углов с помощью изображения, таблицы  и CSS

Вот и вся хитрость скругления углов с использованием изображения, таблицы, под управлением CSS.

Дата публикации: Апрель 2010 | Обновление: Август 2014

CSS тень для текста   Скругленные CSS углы   Коллекция CSS меню

    Сохранить в сервисы и закладки