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>

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

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

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

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

Почта

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

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

Почта

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

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Закругленные углы с помощью радиуса округления границ рамки 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>Здесь будет какой-то контент</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%;
{

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

Вадим Дворниковавтор-переводчик статьи «Rounded Corners with CSS3 Border Radius»

Primer CSS Rounded Corners Border

Посмотреть обсуждение

Улучшить статью

Сохранить статью

• Последнее обновление: 19 апр, 2022

Посмотреть обсуждение

Улучшить статью

Сохранить статью

Primer CSS — это бесплатная среда CSS с открытым исходным кодом, построенная на системах, создающих основу для основных элементов стиля, таких как интервалы, типографика и цвет. Этот систематический метод гарантирует, что наши шаблоны стабильны и взаимодействуют друг с другом. Его подход к CSS находится под влиянием принципов объектно-ориентированного CSS, функционального CSS и архитектуры БЭМ. Он очень многоразовый и гибкий. Он создан с помощью системы дизайна GitHub.

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

Синтаксис:

 

  ....
 

Примечание: * можно заменить любым числом от 0 до 3 в зависимости от требований к радиусу границы.

Классы:

• rounded-0: Этот класс используется для установки радиуса границы в 0, что в основном удаляет любые закругленные углы.
• rounded-1 : Этот класс используется для установки радиуса границы 4 пикселя.
• rounded-2: Этот класс используется для установки радиуса границы в 6 пикселей.
• rounded-3: Этот класс используется для установки радиуса границы 8px.
• круг: Этот класс используется для установки радиуса границы в 50%, что делает границы круглыми.

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

• округленный-*-0
• округленный-*-1
• округленный-*-2
• округленный-*-3

, и осталось

Пример 1: В этом примере мы узнаем о округленных-0 , округленных-1 , округленных-2 , округленных-3 и круг классы. Для вашего лучшего понимания мы используем цвета границ CSS, чтобы изменения были более заметными.

HTML

< html >     < head >      < ссылка ссылка = 916. 0.0/dist/primer.css"          rel = "stylesheet" /> head >     < Body Стиль = "Поправка: 1%; ширина: 50%" > < H2 Стиль < H2 .0108 >          GeeksforGeeks      h2 >      < h4 > Rounded Corners Border h4 > < H3 > округление-0 H3 > > > < DIV Класс = "Граница округлена-0" Стиль = Стиль = . >           GeeksforGeeks – портал компьютерных наук.      дел >      < br >      < h3 >rounded-1 h3 >          < div class = "border rounded-1"            style = "border-color:red !important;" >           GeeksforGeeks – портал компьютерных наук.      div >      < br >      < h3 >rounded-2 h3 > < DIV Класс = "граница округлена-2" "0108 стиль = "border-color: green! важно;" >           GeeksforGeeks – портал компьютерных наук.      div >      < br >      < h3 >rounded-3 h3 > < DIV Класс = "Руковая граница-3" Стиль = ! >         GeeksforGeeks — это портал компьютерных наук.      дел >      < br >      < h3 >Circle h3 >          < div class = "окружность границы" стиль =         "ширина: 100 пикселей; высота: 100 пикселей; цвет фона: зеленый;" >      div > body > html >

Output:

Пример 2: В этом примере мы узнаем о создании закругленных углов или отдельных краев, используя закругленный-вправо-0 , закругленный-вправо-1 , округлено-вправо-2 , и округлено-вправо-3 классов. 16.0.0/dist/primer.css"

         rel = "stylesheet" />

head >

< body style = "padding:1%;width:50%" >

     < h2 стиль = "7:зеленый;цвет; >

         GeeksforGeeks

     h2 >

     < h4 > Rounded Corners Border h4 >

     < h3 >закруглено-вправо-0 h3 >

7 > 0106

< DIV Класс = "СРЕДНАЯ СРЕДНАЯ ПРАВО-РЕЙТ-0"

Стиль 908 =

907 Стиль 908 =

907 . >

         GeeksforGeeks — это портал компьютерных наук.

     дел >

     < br >

     < h3 >rounded-right-1 h3 >

     < div class = "border rounded-right-1"  

         style = "border-color:red" !important > 

        GeeksforGeeks — это портал компьютерных наук.

DIV >

< BR >

>

>

>

>

>

. >

     < раздел класс = "border rounded-right-2"  

         style = "border-color:green !important;" > 

        GeeksforGeeks — это портал компьютерных наук.

DIV >

< BR >

<>

<>

<>

.0108 h3 >rounded-right-3 h3 >

     < div class = "border rounded-right-3"

         стиль = "border-color: blue !important;" > 

         GeeksforGeeks – портал компьютерных наук.

     div >  

body >

html >

Output:

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

Ссылка: https://primer.style/css/utilities/borders#rounded-corners

 index.html
<дел>
Это коробка.