How do I get my div corners rounded?

Discussion in 'Web Design' started by Glenn, Apr 9, 2012.

to remove all ads.
  1. Glenn

    Glenn Member

    Messages:
    192
    Here is what I have defined.

    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -o-border-top-left-radius: 10px;
    -o-border-top-right-radius: 10px;
    -ie-border-top-left-radius: 10px;
    -ie-border-top-right-radius: 10px;

    All work except, drum roll please, Internet Explorer. How do I get the rounded corners in IE?
     
  2. CaldwellYSR

    CaldwellYSR Member

    Messages:
    658
  3. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
  4. Fireproofgfx

    Fireproofgfx New Member

    Messages:
    151
    Ronaldroe that was simply awesome!! I wonder if it works with Dragon speak... To cool.
     
  5. Glenn

    Glenn Member

    Messages:
    192
    Well, guess what. That's where I got the code I have. And guess what, it still doesn't work.
     
  6. Fireproofgfx

    Fireproofgfx New Member

    Messages:
    151
    I just used this off of the very first link posted by Caldwell and it works like a charm
    PHP:
    .tst_cnt  {
        
    background-color:#a8a8a8;
        
    marginauto;
        
    height100%;
        
    width831px;
        -
    moz-border-radius20px/* HERE */
        
    -webkit-border-radius20px;
        -
    khtml-border-radius20px;
        
    border-radius20px;               /* TO HERE    */
            
        
    }


     
  7. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    Fireproof, yours won't work in IE 8 and below. 6 and 7 are damn near irrelevant, but unfortunately, 8 still is.

    Glenn, you can't always just go with the first search result. A few results down was CSS3PIE, which is the answer you're looking for.
     
  8. CaldwellYSR

    CaldwellYSR Member

    Messages:
    658
    Yeah and that's also the 2nd link I gave :/
     
  9. Glenn

    Glenn Member

    Messages:
    192
    I checked many links. I never saw this one. It works great and many new ideas with it. Thanks.
     
  10. Glenn

    Glenn Member

    Messages:
    192
    No, it wasn't. I used that one originally and it did not work either. We just have to face that IE sucks compared to the other browsers.
     
  11. CaldwellYSR

    CaldwellYSR Member

    Messages:
    658
    Ahem.... actually Glen my second link says the best way to do it is the CSS Pie which is what Ronald was talking about. If that doesn't work the next best thing is the images it was talking about which will definitely work 100% of the time it's just not a great practice. Yes IE sucks but you can make it work using the links we gave you.
     
  12. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    That's pretty much the standard. I've reached the point where I don't really worry about IE too much. I make sure my designs at least present a readable experience in IE8 and 9, and that's it. Otherwise, you waste too much time reworking everything. My theory regarding a lot of the effects, especially rounded corners, is that if you don't know that it should be there, you really aren't missing it.
     
  13. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    Because im an advocate of the neatest/smallest code possible...border-radius also has a short hand property:
    border-radius: [top left] [top right] [bottom right] [bottom left]
    Code:
    div {
    border-radius: 5px 5px 0 0;
    -ms-border-radius:5px 5px 0 0;
    }
    
     

Share This Page