Радиус внутренней границы Css

#css

Вопрос:

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

 .border {
  width: 350px;
  height: 200px;
  border: 50px solid grey;
  border-radius: 8px;
  background-color: #f3f3f3;
}

Здесь border-radius свойство делает не то, что я ожидаю, поскольку оно применяет стили снаружи, если граница не является его внутренней частью. Есть ли способ сделать это, используя исключительно css и не добавляя в него больше html-элементов?

Вот кодовый код: Кодовый код

1. Изогнутая внутренняя граница будет (только) отображаться, если радиус границы превышает 50 пикселей (толщина границы).

2. Но мне не нужен радиус до внешней границы, только внутренняя

Ответ №1:

А как насчет этого?

Вы можете использовать псевдоэлемент ::after (или ::before ) и оформить его так, как вы хотите, а затем разместить его поверх вашего .border div, используя позицию absolute .

Я придал ему закругленные границы, которые вы хотели, затем поместил его посередине, поверх вашего .boder div, теперь похоже, что внутренние углы .border закруглены

 .border {
  width: 350px;
  height: 200px;
  border: 50px solid grey;
  background-color: white;
  position: relative;
}

.border::after {
  content: "";
  position: absolute;
  top: -20px;
  left: -20px;
  background-color: #f3f3f3;
  border-radius: 50px;
  height: 240px;
  width: 390px;
}

 <div class="border"></div>

1. Вы должны объяснить, что вы сделали, чтобы решить проблему ОП. А как насчет этого? это не так информативно.

2. Я предполагал, что ОП может заметить трюк, увидев элемент «после», но теперь я обновил свой ответ, с надеждой объяснив, что я сделал.

3. Это намного лучше.

Ответ №2:

Я не знаю чистого CSS-решения, но с дополнительным внутренним div вы могли бы это сделать:

 .border {
  width: 350px;
  height: 200px;
  border: 50px solid grey;
  background-color: #f3f3f3;
}

.outer {
  border-radius: 100px;
}

.inner {
  position: relative;
  top: -50px;
  left: -50px;
  z-index: -1;
}

 <div class="border outer">
  <div class="border inner"></div>
</div>

Ответ №3:

Используйте oultine свойство в качестве границы, и с ::after его помощью вы можете придать .border классу фон, border-radius который можно расположить, перекрывая .border внешний вид внутреннего радиуса границы .

Используется z-index свойство -1 для того, чтобы содержимое .border не было скрыто за фоном.

 .border {
  width: 350px;
  height: 200px;
  outline: 40px solid grey;
  margin: 40px;
  background-color: grey;
  position: relative;
  padding: 10px;
  z-index: 1;
}

.border::after {
  content: "";
  position: absolute;
  background-color: red;
  border-radius: 18px;
  width: 350px;
  height: 200px;
  left: 0px;
  top: 0px;
  z-index: -1;
}

 <div class="border">ddsdggw
</div>

Ответ №4:

Как насчет этого? Я использую другой div для реализации внутренней границы. Вы можете наслаждаться этим кодом.

 .outer_box {
  display: flex;
  width: 350px;
  height: 200px;
  border: 50px solid grey;
  border-radius: 8px;
  background-color: grey;
}

.inner_box {
  width: 330px;
  height: 180px;
  margin: auto auto;
  border: 8px solid white;
  border-radius: 10px;
  background-color: white;
}

 <div class="outer_box">
  <div class="inner_box"></div>
</div>