Закругленные углы с помощью радиуса округления границ рамки CSS3

0 ∞

До появления 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>
Учимся создавать анимированные эффекты с помощью CSS3

Далее добавьте в таблицу стилей правило 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%;
{

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