Вам в помощь
Вам в помощь
instagram

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

instagram


Антивирусные программы от ведущих разработчиков
Антивирусы для ПК
Антивирусные программы от ведущих разработчиков.
Самые простые и эффективные способы удалить вирусы.
Как удалить вирус
Самые простые и эффективные способы удалить вирусы с ПК.
Безопасность, очистка, ускорение системы.
Оптимизация
Безопасность, очистка, ускорение системы.
Виды компьютерных вирусов и интернет мошенничества.
Вирус его цель
Виды компьютерных вирусов и интернет мошенничества.
Антивирусы, сканеры, лечащие утилиты.
Dr.Web, Kaspersky
Антивирусы, сканеры, лечащие утилиты.
Как обезопасить компьютер от вирусов с флешки.
Антивирусы для флешки
Как обезопасить компьютер от вирусов с флешки.
Защита от вирусов, очистка и ускорение телефона.
Безопасность
Защита от вирусов, очистка и ускорение телефона.
Бесплатные и не очень для смартфонов и планшетов.
Антивирусы для Андроида
Бесплатные и не очень для смартфонов и планшетов.
Защита для Айфона, уже давно существует.
Антивирусы на iOs
Защита для Айфона, уже давно существует.
Создание и продвижение сайта в поисковых системах.
Как сделать сайт
Создание и продвижение сайта в поисковых системах.
Доработка веб-ресурсов полезными предложениями.
Как установить на сайт
Доработка веб-ресурсов полезными предложениями.
Простые решения выхода из тупиковых ситуаций.
Так можно!
Простые решения из тупиковых ситуаций.