Пограничный радиус не работает

Ответ 1

Кому может быть эта проблема. Моя проблема заключалась в крахе. Он был настроен на:

border-collapse: collapse;

Я установил его:

border-collapse: separate; 

и это устранило проблему.

Ответ 2

Для тех, кто сталкивается с этой проблемой в будущем, мне пришлось добавить

perspective: 1px;

к элементу, к которому я применял радиус границы. Окончательный рабочий код:

.ele-with-border-radius {
    border-radius: 15px;
    overflow: hidden;
    perspective: 1px;
}

Ответ 3

Чтобы добавить немного к ответу @ethanmay: (fooobar.com/questions/438575/...)...

Если в div есть содержимое, имеющее изогнутые углы, вы должны установить overflow: hidden потому что в противном случае дочернее переполнение div может создать впечатление, что border-radius не работает.

<!-- This will look like the border-radius isn't working-->
<div style="border: 1px solid black; border-radius: 10px;">
  <div style="background: red;">
      text!
  </div>
</div>

<!-- but here the contents properly fit within the rounded div -->
<div style="border: 1px solid black; border-radius: 10px; overflow: hidden;">
  <div style="background: red;">
      text!
  </div>
</div>

JSFiddle: http://jsfiddle.net/o2t68exj/

Ответ 4

в вашем div class= "social-box" css

использовать

            float:right 

вместо

             float:left

Ответ 5

По какой-то причине ваша настройка padding: 7px отменяет радиус границы. Измените его на padding: 0px 7px

Ответ 6

Теперь я использую набор браузеров следующим образом:

{
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
}

Ответ 7

Ваша проблема не связана с тем, как вы установили border-radius. Запустите Chrome и нажмите Ctrl+Shift+j и проверьте элемент. Снимите флажок width, и граница будет иметь изогнутые углы.

Ответ 8

Попробуйте добавить ! important к вашему css. Он работает для меня.

.panel {
  float: right;
  width: 120px;
  height: auto;
  background: #fff;
  border-radius: 7px!important;
}

Ответ 9

Я просто выделяю часть ответа @Ethan May, который является

overflow: hidden;

Скорее всего, это сделает работу для вашего случая.

Ответ 10

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

     // style file
     <link rel="stylesheet" href="css/style.css" />
     // bootstrap file
     <link rel="stylesheet" href="css/bootstrap.min.css" />

правильный путь это

    // bootstrap file
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    // style file
    <link rel="stylesheet" href="css/style.css" />