Закруглить углы css: Скруглённые уголки | htmlbook.ru

Скругление углов в CSS

Главная > Учебник CSS >

Установка скругления

Cуществует возможность установить скругление углов рамки блока. При этом, фон заполняет только область внутри рамки. Если рамки нет, то скругляется только фон.

В CSS cкругление углов устанавливает свойство border-radius. В значении указывается радиус скругления в единицах, доступных в CSS.

Создадим блок и зададим рамку со скруглёнными углами.

Стиль:

+

#div1
  {
  border: 1px solid Red;
  padding: 20px;
  border-radius: 10px;
  }

HTML код:

<div>Блок со скруглёнными углами</div>

Скругление отдельных углов

Можно скруглить любой угол отдельно. Для этого есть свойства:

border-top-left-radius — скругление верхнего левого угла

border-top-right-radius — скругление верхнего правого угла

border-bottom-left-radius — скругление нижнего левого угла

border-bottom-right-radius — скругление нижнего правого угла

Создадим ещё один блок и сделаем скругление правого верхнего угла с радиусом 8 пикселей, а правого нижнего угла с радиусом 20 пикселей. Чтобы между блоками было расстояние, установим и внешние отступы:

Стиль:

#rightrad
  {
  border: 1px solid Red;
  padding: 20px;
  margin: 5px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 20px;
  }

HTML код:

<div>Блок с отдельными скруглёнными углами</div>

Краткая запись

Можно указать радиусы скругления для углов более коротким способом. Для этого свойству border-radius указывается не одно значение, а четыре, через пробел.

• Сначала идёт верхний левый угол
• затем верхний правый
• затем нижний правый
• затем нижний левый

Создадим блок и укажем ему радиусы скругления для каждого угла:

Стиль:

#allradius 
  {
  border-radius: 10px 5px 12px 21px;
  border: 1px solid Red;
  padding: 20px;
  margin: 5px;
  }

HTML код:

<div>Скругление всех углов по отдельности</div>

Скругление в виде эллипса

Скругление угла может быть не только в виде части окружности, но и в виде части эллипса. При этом блок может выглядеть так:

Для этого свойству border-radius сначала указывается горизонтальный радиус, затем через слеш вертикальный радиус. Такой блок создаётся так:

Стиль:

#elradius
  {
  width: 300px;
  height: 50px;
  background-color: #CCC;
  border-radius: 80px/20px;
  }

HTML код:

<div></div>

Для отдельных углов, такое скругление указывается по-другому. Горизонтальный и вертикальный радиус перечисляются через пробел. Пример:

Стиль:

#elk
  {
  border: 1px solid Red;
  padding: 20px;
  margin: 5px;
  border-bottom-left-radius: 50px 15px;
  }

HTML код:

<div>Скругление в виде эллипса</div>

Скругление в процентах

В CSS cкругление углов может указываться в процентах. Проценты берутся от сторон, образующих угол. Например, если для левого нижнего угла указать 10%, то на скругление уйдёт 10 процентов нижней части рамки и 10 процентов левой части рамки. Если указать 50%, то на скругление уйдёт по половине длинны сторон рамки. А если указать 100%, то на скругление уйдйт вся нижняя сторона и вся левая сторона рамки. Скругление в процентах можно указывать как для всех углов, так и для каждого угла отдельно.

Пример:

Стиль:

#pr
  {
  border: 1px solid Red;
  padding: 20px;
  margin: 5px; 
  border-bottom-left-radius: 35%;
  }

HTML код:

<div>Скругление в процентах</div>

Указание скругления в процентах позволяет создавать блоки с различными интересными формами без расчёта размеров. Например такие:

Такой блок создаётся очень просто. Для его создания нужно:

1. Создать квадрантый блок. Длинну и ширину нужно указывать не пикселях, а в абсолютных единицах, например в сантиметрах, чтобы длинна и ширина были одинаковыми.
2. Задать фон блока.
3. Установить скругление всех углов 50 процентов.

Как сделать закругленные углы css

Категория: Сайтостроение, Опубликовано: 2016-08-10
Автор: Юлия Гусарь

Приветствую вас, дорогие читатели!

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

Навигация по статье:

• Как закруглить углы для блока?
• Как закруглить углы картинки при помощи CSS?
• Куда вставлять CSS код?
• Как ещё можно закруглить углы при помощи CSS?

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

Причём вы можете закруглить углы как все сразу, так и только некоторые, да ещё и регулировать для них радиус закругления.

Как, например, здесь:

Круто, не правда ли?!
Всё это стало возможным благодаря CSS свойству border-radius.

Как закруглить углы для блока?

Предположим у вас на сайте есть блок с классом round-corner.

<div class=”round-corner”> </div>

Для того чтобы этот блок было лучше видно я задам ему высоту, ширину и цвет фона при помощи CSS.

.round-corner{ height:100px; width:200px; background:#2F73B6; }

А теперь для того чтобы закруглить все углы этого блока нам достаточно приписать ему всего одну строку в CSS файле или прямо в коде страницы при помощи специальных тегов или атрибутов:

border-radius: 20px;

где 20рх – это радиус закругления угла (чем он больше – тем круглее угол)

Радиус закругления может задаваться как в пикселях, так и в процентах.

Например:

border-radius: 10%;

И вот что мы получим в итоге:

Сразу предупреждаю, что старые версии старые версии браузера Internet Explorer, а также некоторые мобильные браузеры не понимают этого CSS свойства и отображают углы незакруглёнными.

Как закруглить углы картинки при помощи CSS?

Такой же фокус можно проделать и для картинки, кнопки и практически любого элемента на вашем сайте. Для того чтобы закруглить углы в CSS нужно либо прописать для этого элемента класс, для которого задано свойство border-radius, либо вычислить класс блока, внутри которого расположен нужный элемент (в нашем случае это картинка), а затем прописать тег этого элемента, после чего в фигурных скобках прописать ему всё тоже CSS свойство border-radius.

Для картинки CSS код будет выглядеть так:

.content img { border-radius: 20px; }

Вот что получится:

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

Куда вставлять CSS код?

У вас есть аж целых 3 варианта как прописать данное CSS свойство и закруглить углы для элементов на вашем сайте:

1. 1.Открываете CSS файл вашей темы или страницы и там в самом конце дописываете:

   .round-corner{ border-radius: 20px; }

   .round-corner{ border-radius: 20px; }

   Где вместо «round-corner» будет название класса элемента, для которого вы хотите закруглить углы, а вместо 20px будет ваше значение.

2. 2.Этот же код можно прописать прямо на странице вашего сайта, обернув его в тег style

   Выглядеть это будет так:

   <style> .round-corner{ border-radius: 20px; } </style>

   <style> .round-corner{ border-radius: 20px; } </style>

3. 3.Также CSS свойство для закругления углов можно приписать нужному элементу при помощи атрибута style.
   Для картинки это будет выглядеть так:
   

   <img src=”images/pic.png” style=” border-radius: 20px;”

   <img src=”images/pic.png” style=” border-radius: 20px;”

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

Как ещё можно закруглить углы при помощи CSS?

В примере выше я показала как закруглить сразу все 4 угла, но благодаря данному CSS свойству можно закруглять углы по отдельности и задавать им разный радиус закругления.
Для этого всего лишь нужно указать не одно, а четыре значения (для каждого угла своё)

1. 1.На первом месте – левый-верхний угол
2. 2.На втором – правый верхний угол
3. 3.На третьем – правый нижний угол
4. 4.На четвёртом – левый нижний

Задавая разные значения можно получить следующие варианты закругления углов:

Для этого нужно прописать:

border-radius: 0 80% 0 80%;

border-radius: 90% 100% 0 100%;

border-radius: 100% 100% 0 0;

border-radius: 100% 25% 25% 100%;

border-radius: 100%/50%;

border-radius: 100%;

Как видите всё просто! Надеюсь, что у вас не возникнет проблем с созданием закруглённых углов при помощи CSS!

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

Если будут какие то вопросы – пишите их в комментариях. На этом сегодня всё! До встречи в следующих статьях 🙂

Учебное пособие по закругленным углам / радиусу границы Bootstrap

Бесплатный курс дизайна UI/UX

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

Этот урок будет легким, милым и коротким. Мы узнаем, как добавить закругленные углы в Bootstrap и использовать свойство радиуса границы.

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

Примечание: В теории дизайна закругленные углы требуют меньших когнитивных (т.е. связанных с изучением и пониманием реальности) усилий. Они также кажутся нам более дружелюбными. Почему?

Это связано с так называемым «предвзятостью контура» , что заставляет нас ассоциировать острые края с опасностью (как клыки и когти дикого зверя, которых боялись наши предки). В отличие от них есть пологие и закругленные края, которые кажутся нам более дружелюбными и безопасными.

Как добавить радиус границы?

В CSS свойство border-radius отвечает за скругление углов.

В Bootstrap очень легко добавлять закругленные углы к любому элементу и манипулировать свойством border-radius.

Просто добавьте класс округленный- + размер блока к элементу. У вас есть единицы от 0 (удаление закругленных углов) до 9 , поэтому, чтобы добавить, например, слегка закругленные углы, вы можете использовать класс rounded-4 или аналогичный.

Добавление закругленных углов карусели

Теперь давайте добавим закругленные углы в нашу карусель с помощью класса rounded-6 .

Чтобы изменить внешний вид карусели, нам нужно добавить класс rounded-6 к элементу carousel-inner .

            
  
              
              <дел>
  
      
        
     

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

Этикетка первого предметного стекла

Nulla vitae elit libero, a pharetra augue mollis interdum.

Этикетка для второго предметного стекла

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Этикетка для третьего слайда

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Примечание: Если вы хотите узнать больше об изменении свойств границ, загляните на нашу страницу документации по утилитам для границ.

Демонстрация и исходный код для этого урока

Задать вопрос

Пред. Следующий

Об авторе

Михал Шимански

@ascensus_mdb

Соучредитель MDBootstrap / Внесен в список Forbes «30 до 30» / Энтузиаст открытого исходного кода / танцор, ботаник и любитель книг.

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

CSS Закругленные углы и теневые блоки CSS

Многие веб-разработчики в прошлом размещали изображения вместо закругленных углов , потому что по умолчанию внешний вид рамок заостренных прямоугольных углов. Но теперь свойство CSS3 border-radius позволяет веб-дизайнерам рисовать закругленные углы.

Сокращенное свойство border-radius может использоваться для одновременного определения всех четырех углов. Если какое-либо значение установлено равным нулю, этот угол будет квадратным.

Источник

Сокращенное свойство border-radius можно использовать для определения всех четырех углов одновременно, радиус границы: 25px;.

Вы можете указать разные значения в каждом углу поля.

вывод

CSS закругленные углы во всех браузерах

В Firefox вам нужно использовать префикс -moz-, который работает так же, как и стандартная версия CSS.

Чтобы установить разные радиусы для каждого отдельного угла вашей коробки, используйте следующее:

Чтобы установить свойства закругленных углов во всех браузерах, вы можете реализовать следующее:

Как нарисовать круг с помощью CSS?

Скопируйте и вставьте следующий исходный код на свою html-страницу, он нарисует кружок на вашей html-странице.

Круг

output

Как нарисовать затененный прямоугольник?

CSS-свойство box-shadow можно использовать для определения эффектов тени в элементе блока.

Синтаксис:

box-shadow: x y цвет радиуса размытия ;

1. x — указывает расстояние по горизонтали справа от поля.
2. y — указывает расстояние по вертикали над коробкой.
3. размытие — тень будет резкой, чем выше число, тем крупнее и светлее становится тень.
4. радиус — положительные значения заставят тень расширяться и становиться больше.
5. цвет — цвет тени

пример

затемненный ящик

Когда вы устанавливаете отрицательные значения для x и y, тень будет рисоваться слева и выше поля.

В приведенном выше коде x и y установлены как отрицательные значения, поэтому тень будет рисоваться слева и над прямоугольником.