Chrome: Form Border Radius Different than Firefox

**Pamela1991** · May 2, 2012 05:41

Hi all,

I have some HTML/CSS which is working perfectly in Firefox; however, in Chrome, the form/border is being squeezed! I have been playing with the code for hours to no avail. Can anyone please help? Thanks!

Here is the fiddle: http://jsfiddle.net/W22DC/19/

Or if you prefer, the code is below...

The CSS:

Code:

.form1 input{
    font-weight:normal;
    font-size:100%;
    border: 2px solid purple;
    -moz-border-radius:15px;
    -khtml-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px 15px 15px 15px;
    background-color:transparent;    
    padding: 2px 6px 2px 6px;
}
.form1 input:hover, input:focus{
    border: 2px solid black;
    cursor:pointer;
}

The HTML:

Code:

<br />
<div class="form1" align="center"><form name="Example" action="" method="post" style="margin-bottom: 0">
<input type="submit" name="submit" value="7" />
</form></div>
<br />

**RyanReese** · May 3, 2012 06:04

Hi Pamela

.

I don't know why it's happening, but it appears giving an extra pixel of left/right padding to Chrome only will fix it. Not much as a good fix, but this hasn't had any replies yet.

The other option is just to ignore it.

**mercuro** · May 3, 2012 06:37

It is because border-radius is not working in mostly browser like IE or Chrome

**RyanReese** · May 3, 2012 07:55

Originally Posted by mercuro

It is because border-radius is not working in mostly browser like IE or Chrome

It is working. The borders are rounded...

**Paul O'B** · May 3, 2012 08:19

Hi,

It's' a known chrome bug on inputs and you can't have a border-radius that adds up to more than the height of the element. If you want it perfectly round then make sure the dimensions are exact.

e.g.

Code:

.form1 input{
    font-weight:normal;
    font-size:100%;
    border: 2px solid purple;
    -moz-border-radius:15px;
    -khtml-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px;
    background-color:transparent;    
   padding:0;
    height:30px;
    width:30px;
    line-height:28px;
    text-align:center;
}

For a 15px border-radius you need an element that must be at least 30px x 30px.

**Pamela1991** · May 19, 2012 01:44

Thank you so much for your answers, Ryan and Paul!

Hasty me, I despairingly lost hope that anyone would answer after 24 hours, so I just stopped looking at my code for a couple of weeks. Today I decided to check on here again and thankfully I did! I'm now inspired to go back to my code and finish the site I was working on. Thanks so much guys for all your help!

Originally Posted by RyanReese

Hi Pamela

.

I don't know why it's happening, but it appears giving an extra pixel of left/right padding to Chrome only will fix it. Not much as a good fix, but this hasn't had any replies yet.

The other option is just to ignore it.

Originally Posted by Paul O'B

Hi,

It's' a known chrome bug on inputs and you can't have a border-radius that adds up to more than the height of the element. If you want it perfectly round then make sure the dimensions are exact.

e.g.

Code:

.form1 input{
    font-weight:normal;
    font-size:100%;
    border: 2px solid purple;
    -moz-border-radius:15px;
    -khtml-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px;
    background-color:transparent;    
   padding:0;
    height:30px;
    width:30px;
    line-height:28px;
    text-align:center;
}

For a 15px border-radius you need an element that must be at least 30px x 30px.

Paul, thanks for the code. It is working perfectly now! I also asked this on stack overflow, so if you have an account there, you can paste your answer there and I'll select it as the best answer; otherwise, I'll paste your answer there linking over here to credit you.

Besides learning this CSS bit, I also learned the lesson that next time I shouldn't be so hasty!

Thanks again for all your help guys!