Закругленные углы с помощью радиуса округления границ рамки CSS3
До появления CSS3, чтобы добавить к таким элементам веб-страницы, как формы или кнопки, закругленные углы, нужно было использовать ряд изображений и много дополнительной разметки. К счастью, теперь закругленные углы CSS позволяет создавать очень просто. В том числе это можно сделать с помощью свойства border-radius.
Вы можете использовать это свойство CSS3 для следующих браузеров:
- Chrome 6+;
- Firefox 4+;
- Safari 5 +;
- IE9 +;
- Opera 10.5+;
- Android 2.1+;
- iOS 3.1+.
Радиус округления углов рамки в CSS
Мы будем работать с классом "info-box". Это может быть область вашей веб-страницы с контактной информацией, и вы хотите с помощью CSS закруглить углы.
Напишите HTML-код элемента, для которого вы хотите закруглить углы:
<div class="info-box">Здесь будет какой-то контент</div>
Далее добавьте в таблицу стилей правило CSS:
.info-box {
-webkit-border-radius: 20px;
border-radius: 20px;
background-color: #000000;
{
Примечания:
Мы добавили как вендорную версию свойства, так и обычную. Мы также добавляем цвет фона. Чтобы радиус округления углов рамки отображался должным образом, фон элемента должен отличаться от фона области, в которой размещается элемент. Иначе нужно будет добавить стили, ширину и цвет рамки.
Перед тем, как сделать закругленные углы CSS, нужно отметить, что в приведенном примере все четыре угла рамки будут иметь один и тот же радиус (20 пикселей).
Неодинаковые углы
Вы также можете создавать панели с закругленными углами, которые отличаются друг от друга. Это можно сделать, добавив для свойства CSS несколько значений. С помощью сокращений CSS их можно указать в одну строку. Порядок присвоения значений: верхний левый угол, верхний правый, нижний правый, нижний левый:
.info-box {
-webkit-border-radius: 20px 60px 40px 30px;
border-radius: 20px 60px 40px 30px;
background-color: #000000;
{
Как создать круг
Еще один эффект, который вы можете создать с помощью этого свойства, это круглые изображения. Если у вас есть изображение, которое имеет идеальную квадратную форму, то можно с помощью CSS закруглить углы картинки, и тогда рамка "обрежет" края изображения и создаст идеальный круг.
Допустим, что у вас в HTML-разметке есть квадратное изображение, которое имеет класс "bio-pic". Вы можете сделать это изображение круглым с помощью следующего CSS-кода:
img.bio-pic {
-webkit-border-radius: 50%;
border-radius: 50%;
{
В этом случае не нужно задавать цвет фона или цвет границы, потому что вы добавляете эти стили к изображению эффект закругленных углов будет работать, так как изображение будет отличаться от цвета фона, на котором оно расположено.