Делаем закругленные края у div блока с помощью css

Прежде всего, этот урок будет полезен Web - мастерам которые занимаются вёрской шаблонов. Оформление сайта смотрится лучше, если края блоков слегка закруглены и не имеют острых углов.

Чтобы достич такого эффекта с помощью графических элементов, которые будут оформлять углы, уйдёт не мало времени на их создание, а после всего этого, потребуется написать не мало кода чтобы всё это оформить.

На помощь нам приходит css3 с его новыми свойствами.

Живой пример div блока с закруглёнными углами.

Компактный код, который и создаёт данный эффект.

css
#element {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px 5px 5px 5px;
	border:1px solid #000000;
	height:50px;
}
html
<div id="element">
	<!--Содержимое блока-->
</div>

В моём случае размер закругления равен 5px, если вы хотите сделать их больше или меньше, измените это значение в каждой строке.

Поделитесь ссылкой если мы вам помогли!

Читайте также:

Функция преобразования строчных букв на заглавные [PHP]

Заметки

Добавить комментарий:

Минимум 100 символов.
Модераторы detected!

Вы ввели сообщение длиной символов

Три + Пять ? =