title: CSS UL doesn't have the border on all sides except when height is mentioned
body: <p>I am practicing the men</p>
  
  <p>myIndex.html:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" type="text/css" href="myMenu.css"&gt; 
  &lt;/head&gt;
  &lt;body&gt;
  &lt;ul id="menu"&gt;
  &lt;li&gt;&lt;a href=""&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=""&gt;5 columns&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=""&gt;4 columns&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=""&gt;3 columns&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=""&gt;1 column&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>myMenu.css</p>
  
  <pre><code>#menu {
      list-style:none;
      width:940px;
      margin:30px auto 0px auto;
      height:43px;
      padding:0px 20px 0px 20px;
  
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px;
  
      background: #014464;
      background: -moz-linear-gradient(top, #0272a7, #013953);
      background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));
  
      border: 1px solid #002232;
  }
  #menu li {
      float: left;
      display: block;
      padding: 4px 10px 4px 10px;
      margin-right:30px;
  }
  #menu li a {
      display: block;
      text-decoration:none;
  }
  </code></pre>
  
  <p>here if height:43px is removed from #menu, then it does not have the wrapping container shape (ie borders with rounded 4 corners) rather one single border at the top is visible. I am not sure why is the behavior so? The Ul already knows the elements within it such as li and a with non zero heights then why is it unable to wrap them?</p>
  
  <p>Thanks in advance for the explanation.</p>