Как закруглить углы CSS, HTML, DIV



Рассмотрим варианты, как закруглить углы картинки, панелей сайта, не прибегая к Фотошопу и форматам gif, jpg, png, а с помощью стиля CSS и кода HTML.

Закруглить углы CSS

В CSS прописываем свойство для стиля .corners

.corners {
border-radius: 10px;
}

а в "HTML" код прописываем класс <td class="corners" ...

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Закруглить углы</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<table width="200" height="100" bgcolor="#00e600">
<tr>
<td class="corners" align="center">Вариант 1</td>
</tr>
</table>
</body>
</html>



как закруглить углы css, html, div

HTML

Прописываем в HTML код такой стиль:

<td style=" border-radius:10px; ...">Вариант 2</td>

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Закруглить углы</title>
</head>
<body>
<table width="200" height="100" bgcolor="#FFFF00" >
<tr>
<td style="border-radius:10px; border: 1px solid silver; padding: 10px;" align="center">Вариант 2</td>
</tr>
</table>
</body>
</html>



как закруглить углы css, html, div

DIV

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Закруглить углы</title>
</head>
<body>
<div style="background-color: #00FFFF; border: 1px solid silver; margin: 5px auto; padding: 10px; width: 200px; border-radius:10px;"> Вариант 3
</div>
</body>
</html>



как закруглить углы css, html, div

Во всех трёх вариантах можно закруглить углы разного радиуса.

Требуется только прописать для каждого угла своё значение: 10px 5px 30px 15px.

как закруглить углы css, html, div

В Internet Explorer свойства "border-radius" не работает и поэтому используют скрипт разработанный Remiz Rahnas border-radius.htc (Скачать) или PIE.htc (Скачать), который загружается в корневую папку сайта. В CSS для стиля .corners прописывается дополнение:

"behavior: url(папка где лежит скрипт/border-radius.htc)"

.corners {
border-radius:10px;
behavior: url("htc/border-radius.htc");
}

Но это все не так существенно, так как сейчас мало кто пользуется IE.




Антивирусы
Программы от ведущих разработчиков.

Персональный компьютер
Очистка, ускорение.

Как удалить вирус
Проверенная методика удаления.

Вирус и его цель
Виды, обнаружение и удаление.

Dr.Web
Только Dr.Web антивирусы, сканеры, лечащие утилиты.

Антивирусы для флешки
Как обезопасить свой компьютер от вирусов с флешки.


Антивирусы
Бесплатные и не совсем, для смартфонов и планшетов.

Мобильный телефон
Защита от вирусов, очистка, ускорение.


Создание и продвижение
Как сделать сайт и продвигать его в поисковых системах.

Установить на сайт
Полезные предложения.