title: CSS: border-radius // insert a background; white corners
body: <p>So I'm totally new to HTML/CSS. I'm designing a fun project now to learn web development.
  I created a search bar and wanted to add the famous round corners with border-radius. So far it works good. The problem is that the white background shines through the edges now, since the search bar is located in the menu bar.
  I will post a screenshot and the code below. I'm not 100% familiar with the CSS box-model. I guess there lies the problem. Maybe I can fill the void with my menu background image? Hope someone can guide me where to fix this problem.</p>
  
  <p>Screenshot:
  <a href="https://picload.org/view/prwpirg/bildschirmfoto2015-09-20um16.3.png.html" rel="nofollow">https://picload.org/view/prwpirg/bildschirmfoto2015-09-20um16.3.png.html</a></p>
  
  <p>HTML Code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;facefuck&lt;/title&gt;
          &lt;link rel="stylesheet" href="./css/style.css" type="text/css"/&gt;
          &lt;link rel="icon" href="favicon.ico" type="image/x-icon" /&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="headerMenu"&gt;
              &lt;div id="wrapper"&gt;
                  &lt;div class="logo"&gt;
                      &lt;img src="./img/face_logo.jpg" /&gt;
                  &lt;/div&gt;
                  &lt;div class="search_box"&gt;
                      &lt;form action="search.php" method="GET" id="search"&gt;
                          &lt;input type="text" name="q" size="60" placeholder="Put your dick here" /&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
                  &lt;div id="menu"&gt;
                      &lt;a href="#" /&gt;Home&lt;/a&gt;
                      &lt;a href="#" /&gt;About&lt;/a&gt;
                      &lt;a href="#" /&gt;Sign Up&lt;/a&gt;
                      &lt;a href="#" /&gt;Sign In&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS Code:</p>
  
  <pre><code>* {
      margin: 0px;
      padding: 0px;
      font-family: Arial, Helvetica, Sans-serif; 
      font-size: 12px;
      background-color: #EAEDF5;
  }
  .headerMenu {
      background-image: url("../img/menu_bg.png");
      height: 60px;
      border-bottom: 0px;
      padding-left: auto;
      padding-right: auto;
      width: 100%;
  }
  #wrapper {
      background-image: url("../img/menu_bg.png");
      margin-left: auto;
      margin-right: auto;
      width: 1000px;
      padding-top: 0px;
      padding-bottom: 0px;
  }
  .logo {
      background-image: url("../img/menu_bg.png");
      width: 125px;
  }
  .logo img {
      width: 150px;
      height: 100%;
  }
  .search_box {
      position: absolute;
      top: 17px;
      margin-left: 150px;
  }
  #search input[type="text"] {
      background: url(../img/search_white.png) no-repeat 10px 6px #D8D8D8;
      outline: none;
      border: 0 none;
      border-radius: 100px;
      font: bold 12px Arial, Helvetica, Sans-serif;
      width:300px;
      padding: 5px 15px 5px 35px;
      text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
      -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
      -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
      -webkit-transition: all 0.7s ease 0s;
      -moz-transition: all 0.7s ease 0s; 
      -o-transition: all 0.7s ease 0s;
      transition: all 0.7s ease 0s;
  }
  #search input[type="text"]:focus {
      background: url(../img/search_black.png) no-repeat 10px 6pc #fcfcfc;
      color: #6a6f75;
      width: 300px;
      -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
      -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
      text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
  }
  ...
  </code></pre>