Computer
Telephone
Site
Все статьи

Как закруглить углы 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.





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


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


Как удалить вирус
Самые простые и эффективные способы.


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


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


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


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


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


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


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