Как закруглить углы CSS HTML DIV
Рассмотрим варианты, как закруглить углы картинки, панелей сайта, не прибегая к Фотошопу и форматам gif, jpg, png, а с помощью стиля CSS и кода HTML.
Закруглить углы CSS
В CSS прописываем свойство стиля .corners (border-radius: 10px;)
.corners {
border-radius: 10px;
width: 200px;
height: 100px;
background: #00e600;
text-align: center;
}
Результат примера в табличном теле <table>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Закруглить углы</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<table >
<tr>
<td class="corners" >Вариант 1</td>
</tr>
</table>
</body>
</html>
HTML
Прописываем в HTML код такой стиль: <td style=" border-radius:10px; ...">Вариант 2</td>
Результат примера без css, стиль прописан в теле таблицы.
<!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>
DIV
Заменяем в HTML табличный тег <table> на <div> более современный.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Закруглить углы</title>
</head>
<body>
<div class="corners">Вариант 3</div> /* Вариант с css таблицей стилей*/
<div style="background: #00FFFF; width: 200px; height:40px; border-radius:10px;"> Вариант 3</div> /* Без css */
</body>
</html>
Во всех трёх вариантах можно закруглить углы разного радиуса.
Требуется только прописать для каждого угла своё значение: 10px 5px 30px 15px.
Cплошной круг css:
.corners {
width: 150px;
height: 150px;
background: #993333;
border-radius: 50%;
font-size: 13px;
color: #fff;
line-height: 150px;
text-align: center;
}
В 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.
