логотип
Вам в помощь

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

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

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>

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

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>

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

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

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

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

Cплошной круг css:

.corners {
width: 150px;
height: 150px;
background: #993333;
border-radius: 50%;

font-size: 13px;
color: #fff;
line-height: 150px;
text-align: center;
}

круг css

В 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.




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

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

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

Вирус в телефоне
Защита от вирусов очистка ускорение.

Kaspersky на помощь
Компьютерная антивирусная помощь.

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

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

Для телефона
Бесплатные антивирусные программы на смартфон.

Для флешки
Как обезопасить свой компьютер от вирусов с флешки

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

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

Простые решения
в тупиковых ситуациях.