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

css — Как скруглить углы внутрь блока с обводкой

Интересует верстка блока с закругленными внутрь углами. Важно не просто их скруглить, но и сохранить обводку у блока.

1

Версия @Ruslan_K, но с границами:

#main {
    margin: 40px;
    height: 100px;
    background-color: #1abc9c;
    position: relative;
    overflow: hidden;
}

#main .edge {
    position: absolute;
}

#main .edge.top {
    top: 0;
    left: 10px;
    right: 10px;
    bottom: 0;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}

#main .edge.left {
    left: 0;
    top: 10px;
    bottom: 10px;
    right: 0;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
}

#main .corner {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: #FFF;
    border: 1px solid #000;
}

#main .  corner.top { top: -10px; }
#main .corner.bottom { bottom: -10px; }
#main .corner.left { left: -10px; }
#main .corner.right { right: -10px; }

<div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

Основная идея: вырезать лишние области с помощью псевдоэлементов.
Понадобится всего два блока в разметке (.wrapper и .content):

* {
  box-sizing: border-box;
}

.wrapper {
  background-color: #efefef;
  width: 300px;
  height: 60px;
  margin: 40px;
  /**
   * Ключевые свойства
   * С помощью position: relative будем позиционировать псевдоэлементы для вырезания границ
   * С помощью overflow: hidden будем делать сектора
   */
  position: relative;
  overflow: hidden;
}

/* Для наглядной демонстрации работы, не нужно в проекте */
.
  wrapper.demo {
  border: 2px solid #bad;
  overflow: visible;
}

.content {
  /* Цвет границы блока должен совпадать с границей будущих вырезанных секторов */
  border: 2px solid #07c;
  width: 100%;
  height: 100%;
}

.wrapper::before,
.wrapper::after,
.content::before,
.content::after {
  /* Цвет следует подобрать в цвет фона сайта для перекрытия части основного блока */
  background-color: #fff;
  /* Цвет границы блока должен совпадать с границей основного блока */
  border: 2px solid #07c;
  /* Делаем окружность */
  border-radius: 50%;
  content: '';
  /* Позиционируется относительно .wrapper. Это важно для понимания. */
  position: absolute;
  width: 30px;
  height: 30px;
}

/* Позиционирование будущих секторов: верхний ряд */
.wrapper::before,
.wrapper::after {
  top: -15px;
}

.wrapper::before {
  left: -15px;
}

.  wrapper::after {
  right: -15px;
}

/* Позиционирование будущих секторов: нижний ряд */
.content::before,
.content::after {
  bottom: -15px;
}

.content::before {
  left: -15px;
}

.content::after {
  right: -15px;
}

<div>
  <div></div>
</div>

<div>
  <div></div>
</div>

Блок с классом .demo добавлен только для понимания того, как это все работает.

---

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

Сгенерировать градиент можно с помощью online-сервиса Ultimate CSS Gradient Generator.

#main {
    margin: 40px;
    height: 100px;
    background-color: #1abc9c;
    position: relative;
    overflow: hidden;
}

#main div {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: #FFF;
}

. top { top: -10px; }
.bottom { bottom: -10px; }
.left { left: -10px; }
.right { right: -10px; }

<div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Закруглённые углы на CSS3.

Основы Unreal Engine 5

Пройдя курс:

— Вы получите необходимую базу по Unreal Engine 5

— Вы познакомитесь с множеством инструментов в движке

— Вы научитесь создавать несложные игры

Общая продолжительность курса 4 часа, плюс множество упражнений и поддержка!

Чтобы получить Видеокурс,
заполните форму

E-mail:
Имя:

Другие курсы

Как создать профессиональный Интернет-магазин

После семинара:

— Вы будете знать, как создать Интернет-магазин.

— Вы получите бесплатный подарок с подробным описанием каждого шага.

— Вы сможете уже приступить к созданию Интернет-магазина.

Записаться

Другие курсы

Человек не будет наслаждаться едой и питьем, если не перестрадает от голода и жажды.

Аврелий Августин

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

Для начала создадим простенькую html разметку

<html>
<head>
  <title>border-radius</title>
  <meta charset="utf-8">
</head>
<body>
  <div></div>
</body>
</html>

Теперь зададим базовые стили для нашего блока.

.block {
  width: 200px;
  height: 200px;
  margin: 20px;
  background: #777;
}

Вот, что мы имеем сейчас

Давайте скруглим углы блока на 10px

.block {
  width: 200px;
  height: 200px;
  margin: 20px;
  background: #777;

  border-radius: 10px;
}

Чтобы скруглить все углы, мы добавили свойство border-radius с единственным значением

10px, но мы можем задать для каждого угла своё скругление. Для этого просто перечислим 4 значения для верхнего левого, верхнего правого, нижнего правого и нижнего левого угла.

.block {
  width: 200px;
  height: 200px;
  margin: 20px;
  background: #777;

  border-radius: 10px 20px 30px 40px;
}

Как видно из скриншота, все углы у нас теперь с разным скруглением. Мы можем также рассписать свойства для каждого угла отдельно

.block {
  width: 200px;
  height: 200px;
  margin: 20px;
  background: #777;

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

«Зачем это нужно, если у нас есть сокращённая форма?» — Чтобы ответить на этот вопрос, давайте рассмотрим пример

.block {
  width: 200px;
  height: 200px;
  margin: 20px;
  background: #777;

  border-bottom-right-radius: 20px 40px;
}

Как видно из скриншота, наш правый нижний угол закруглён неравномерно. Т.е. по вертикали угол закруглился на 40px, а по горизонтали на 20px. Данный способ используется, когда вам нужно сделать какую-нибудь очень сложную фигуру на CSS, в остальных случаях вполне хватает сокращённой формы.

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

.block {
  width: 200px;
  height: 200px;

  margin: 20px;
  background: #777;

  border-radius: 50%;
}

• Создано 07.04.2014 08:00:00
• Михаил Русаков

Предыдущая статьяСледующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk. com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

   Она выглядит вот так:

2. Текстовая ссылка:
   <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

   Она выглядит вот так: Как создать свой сайт

3. BB-код ссылки для форумов (например, можете поставить её в подписи):
   [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

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

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

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

Начать обучение

---

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

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

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

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

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

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

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

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

округлено-0 округлый-1 округлый-2 округлено-3 округлый-4 округлено-5 округлено-6 округлено-7 округлено-8 округлено-9

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

Теперь давайте добавим закругленные углы в нашу карусель с помощью класса 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» / Энтузиаст открытого исходного кода / танцор, ботаник и любитель книг.

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

Как изогнуть углы каждого изображения в Squarespace // Как добавить закругленные углы к любому изображению — InsideTheSquare.

co

ВЕРСИЯ 7.1ВЕРСИЯ 7CUSTOM CSS

24 января

Написано insidethesquare

Это руководство было записано в Squarespace 7.1, но также применимо к устаревшим сайтам, созданным на версии 7. Для получения дополнительной информации посетите страницу insidethesquare.co/themes

Если вы являетесь пользователем Squarespace, вы знаете, что Платформа предлагает широкий выбор стилей. Но если вы чувствовали себя ограниченными из-за отсутствия параметров настройки, не бойтесь! Вы можете использовать пользовательский CSS, чтобы добавить уникальный штрих к вашему сайту.

Для блоков изображений в версии 7.1 можно скруглить углы с помощью меню дизайна. Но как насчет элементов списка? Резюме блога? Эскизы проектов в портфолио?

Мы можем согнуть их все одной строкой кода.

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

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

Что делать:

Шаг 1: Войдите в свою учетную запись Squarespace и нажмите Design , а затем Custom CSS .

Шаг 2: Вставьте этот код в поле Custom CSS: 

img { border-radius: 30px; } 

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

Совет от профессионала: Вы можете использовать любой тип значения вместо 30px, но не все типы значений будут выглядеть одинаково для каждого изображения. 50% изгибает края на 50% по горизонтали и вертикали. Квадратные изображения будут идеальным кругом, а другие — овалом. Для обтекаемого вида. Я рекомендую использовать значение в пикселях, чтобы у каждого изображения был одинаковый стиль углов.

Узнайте больше о значениях длины CSS здесь.

Шаг 3: Нажмите « Сохранить », и вы сразу же увидите изменения в изображениях на странице.

Шаг 4 (необязательно): Если есть определенные изображения, которые вы не хотите округлять, вы можете получить их идентификатор блока и добавить его к этому коду после шага 2:

#block-123456 img {граница-радиус: 0; }

Это вернет изображение к исходной угловой форме.

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

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

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