SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Chrome: Form Border Radius Different than Firefox

    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 />

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,598
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  3. #3
    SitePoint Member
    Join Date
    May 2012
    Location
    UK
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is because border-radius is not working in mostly browser like IE or Chrome

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,598
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mercuro View Post
    It is because border-radius is not working in mostly browser like IE or Chrome
    It is working. The borders are rounded...
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

  6. #6
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

    Quote Originally Posted by RyanReese View Post
    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.
    Quote Originally Posted by Paul O'B View Post
    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!

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Glad you got it working

    Stack overflow - what's that

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Off Topic:

    Quote Originally Posted by Paul O'B View Post
    Stack overflow - what's that
    The EN-EM-Meeeee! Muwahahahaha!


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •