Как я могу заставить границу работать правильно html

Question

Так что я биваю границу вокруг div вот так

#menu{
  margin: 0px;
  padding: 100px 0px 0px 20px;
  float: left;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  border-top: 1px solid black;
  border-radius: 0px 10px 10px 0px;
}

<div id="menu">
  <p>Hello</p>
</div>

Но граница игнорирует заполнение или что-то, что видно на изображении Изображение

Answer 1

Согласно CSS Боксовая модель Граница находится прямо между полем и отступом. CSS Бокс-модель

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

#menu{
  margin: 100px 0px 0px 20px;
  padding: 5px;
  float: left;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  border-top: 1px solid black;
  border-radius: 0px 10px 10px 0px ;
}

Надеюсь, это то, что вы хотите.

Answer 2

Попробуйте, это работает для меня

#menu p{
        text-align: center;
        margin: 0 auto;
        border: 1px solid black;
        padding: 50px;
        border-radius: 20px;
        width: 300px;
    }

<div id="menu">
  <p>Hello</p>
</div>

Answer 3

Если отступ имеет четыре значения:

padding:10px 5px 15px 20px;

Это означает:

 - top padding is 10px 
 - right padding is 5px 
 - bottom padding is 15px 
 - left padding is 20px

И аналогично для border-radius:

border-radius: 15px 50px 30px 5px;  

(первый значение применяется к верхнему левому углу, второе значение применяется к верхнему правому углу, третье значение применяется к нижнему правому углу, а четвертое значение применяется к левому нижнему углу)

Итак, вы можете попробовать это:

#menu {
  margin: 0px;    
  padding: 100px 0px 0px 20px;    
  float: left;   
  border: 1px solid black;  
  border-radius: 10px;  
}

Answer 4

Простой пример ниже. для дальнейших разъяснений посетите w3schools

<p class="round3">Roundest border</p>

p.round3 {
  border: 2px solid red;
  border-radius: 12px;
}

Answer 5

Попробуйте эти значения:

#menu{
margin: 0px;
padding: 100px 0px 0px 20px;
//padding: top right bottom left
float: left;
border: 1px solid black;
border-radius: 10px ;
}