Свойство CSS border-radius

Практически всем блочным элементам в HTML можно закруглять углы (например, тег <div>, тег <img>, тег <table>). Это делается с помощью свойства CSS border-radius. В этой статье мы рассмотрим все различные варианты.

Синтаксис CSS border-radius:

border-radius: [значение_скругления];

Как скруглить углы в HTML через CSS

Рассмотрим примеры скругления углов через CSS. Например

<html>
<head>
<style>
.primer1{
width: 200px;
height: 100px;
background: green;
border-radius: 30px;
}
</style>
</head>
<body>
<div class="primer1"></div>
</body>
</html>

В этом случае все 4 края элемента будут скруглены по 30px.


Значение скругления означает то, какой радиус окружности должен быть в уголке.

Можно скруглять каждый угол с разными радиусами. Для этого нужно написать

border-radius: 10px 7px 0px 0px;

Последовательность этих цифр следующая:

  • Верхний левый угол (в примере это 10px)
  • Верхний правый угол (в примере это 7px)
  • Нижний правый угол (в примере это 0px)
  • Нижний левый угол (в примере это 0px)

Например

<html>
<head>
<style>
.primer2{
width: 200px;
height: 100px;
background: green;
border-radius: 30px 15px 0px 10px;
}
</style>
</head>
<body>
<div class="primer2"></div>
</body>
</html>

Результат:


Чтобы не запоминать какое значение за каким идет можно писать в CSS в отдельности каждый угол

border-top-left-radius: 10px; // верхний левый угол
border-top-right-radius: 7px; // верхний правый угол
border-bottom-right-radius: 0px; // нижний правый угол
border-bottom-left-radius: 0px; // нижний левый угол





Помимо этого, можно также изменять и радиус для каждого угла в отдельности для горизонтальной и вертикальной плоскостей.

Задание второго радиуса нужно задавать через слэш “/” в случае border-radius или вторым значением рядом в случае прямого указания каждого угла радиуса

border-radius: 5px 5px 5px 5px / 10px 10px 10px 10px;
или можно задать так:
border-top-left-radius:5px 10px; // верхний левый угол
border-top-right-radius:5px 10px; // верхний правый угол
border-bottom-right-radius:5px 10px; // нижний правый угол
border-bottom-left-radius:5px 10px; // нижний левый угол

Первый параметр отвечает за горизонтальный радиус, второй за вертикальный.

Например, с помощью этих свойств можно сделать эллипс:

<html>
<head>
<style>
.primer3{
width: 200px;
height: 100px;
background: green;
border-radius: 300px 300px 300px 300px / 200px 200px 200px 200px;
}
</style>
</head>
<body>
<div class="primer3"></div>
</body>
</html>

Результат:



Примечание

Значения 100px 100px 100px 100px / 200px 200px 200px 200px можно было бы написать еще компактнее:

border-radius: 100px / 200px;

Изменяя параметры каждого из углов, можно сделать различные интересные скругленные элементы. Например, можно сделать круг, эллипс, каплю, камень, яйцо и т.п.

Задание толщины, цвета и типа линии при скруглении

Помимо значений закруглений можно также задавать толщину, цвет и тип линии скругления. Делаются все эти три параметра через свойство border:

border: [толщина] [тип_линии] [цвет];

Например:

border: 1px solid #00ff00;

  • Толщина – задается чаще всего в пикселях
  • Тип линии может принимать значения:

    • solid (сплошной)
    • dashed (пунктирный)
    • dotted (ряд точек)
    • groove (линия бороздка)
    • inset (вдавленная линия)
    • outset (выдавленная линия)

  • Цвет можно задать либо в формате RGB, либо просто названием (см. коды и названия html цветов)

Приведем пример

<html>
<head>
<style>
.primer4{
width: 200px;
height: 100px;
border: 3px solid #ae0
border-radius: 10px;
}
</style>
</head>
<body>
<div class="primer4"></div>
</body>
</html>


Таким образом можно красиво оформлять различные рамки для объявлений, замечаний на сайте.






Свечение для скругления

Помимо задания толщины, цвета и типа линии можно также задавать и свечении рамки. Делается это с помощью свойства box-shadow

box-shadow: 0px 0px 4px 2px #a0b;

Первые два параметра (0px 0px) задают сдвиг тени по горизонтали и вертикали соответственно. Следующие два параметра (4px 2px) задают силу свечения вокруг. Чтобы получилось красиво нужно делать одну цифру больше другой, а вообще надо экспериментировать. Последний параметр – цвет (#a0b).

Например

<html>
<head>
<style>
.primer5{
width: 200px;
height: 100px;
border: 3px solid #ae0
box-shadow: 1px 0px 4px 2px #a0b
border-radius: 10px;
}
</style>
</head>
<body>
<div class="primer5"></div>
</body>
</html>

Результат:


Мы приводили всегда в качестве примеров тег <div>. Но таким же образом можно скруглять и table, img, iframe. Чтобы скруглить края у этих элементов нужно всего лишь в стилях CSS элемента прописать border-radius.

Браузеры

Старые браузеры могут не поддерживать свойство border-radius. Так, IE ниже 9 версии, Firefox ниже 4 не отображают закругления. Необходимо прописывать вендорные префиксы CSS:

-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;



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

• Как добавить кнопку "Наверх" на сайте

• Как сделать якорь ссылки

• Как сделать форму обратной связи на php с каптчей

• Как сделать красивую подсказку для ссылок

• Как увеличивать изображения (все способы)

• Кнопка html

• Коды символов для HTML

← Перейти в каталог html уроков и советов

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

Copy Protected by Chetan's WP-Copyprotect.