[Webkit-unassigned] [Bug 109913] New: Bug that cancel "border-radius" property on forms when "border-width" > 1px

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=109913

           Summary: Bug that cancel "border-radius" property on forms when
                    "border-width" > 1px
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: PC
        OS/Version: Windows 7
            Status: UNCONFIRMED
          Severity: Normal
          Priority: P2
         Component: Forms
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: dorian.maturin at gmail.com


I found a problem when I tried to display a form (a searchbox in this case) with a combination of "border-radius" and "border" with more than 1px. I reproduce my use-case on every browser and recreate this anomaly only on Chrome (24.0.1312.57) and Safari (5.1.7) so I supposed that is due to Webkit.
When I combine a "border-width" with more than 1px with a "border-radius" property on a form object it cancel automatically the "border radius" property and display a classic border with no rounded borders instead. However, if i set the "border-width" property on 1px it works normally...

Code (html):
<nav>
 <ul>
  <li>
    <form id="search" autocomplete="off">
      <input id="search-box" type="search" value=""/>
      <input id="search-button" type="image" src="img/search-button.png" width="20" height="20" alt="search button"/>
    </form>
  </li>
 </ul>
</nav>



Code (css):
/* Search-box layout*/
#search
{
  width:294px;
  text-align:center;
}

#search-box
{
  width:220px;
  height:15px;
  padding-left:5px;
  border:2px solid #aaaaa7;
  font-size:x-small;
  border-radius:5px;
}

#search-button
{
  vertical-align:middle;
}

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.