border-radius у body

#html #css #language_lawyer #border #overflow

Почему div не обрезался до круга? В аналогичном случае с другим контейнером всё обрезается.
Причём, вроде как во всех браузерах такое поведение.



body {
  width: 10em;
  height: 10em;
  border-radius: 50%;
  overflow: hidden;
}

div {
  height: 100%;
  width: 100%;
  background: silver;
}







main {
  width: 10em;
  height: 10em;
  border-radius: 50%;
  overflow: hidden;
}

div {
  height: 100%;
  width: 100%;
  background: silver;
}




    

Ответы

Ответ 1

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



    * div {
      border-radius: 50%;
    }

    div {
      width: 20px;
      height: 20px;
      background: black;
      color: white;
      padding: 50px;
    }
  

    1
    

      2
      

        3
        

          4