Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Oct 2012
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

    curved corner to a DIV

    I tried in my website Rounded corner on DIV using the CSS radius property. It was working fine in Chrome and Firefox. But IE not supported this property. So i am using .htc file as ab background. In that case the rounded corner is working but it shows the black color background.

    Any help appreciated.

  • #2
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    922
    Thanks
    76
    Thanked 29 Times in 29 Posts
    If I understand what you are saying you could play about with this code. This will sort out your issues of the black background still showing, even with the rounded border there:

    Code:
    <html>
    <head>
    <title>help</title>
    
    <style type="text/css">
    div {border: 1px solid black;
        width: 20%;
    	height: 20em;
    	-moz-border-radius-bottomright: 30px;
        border-bottom-right-radius: 30px;
    	overflow: hidden;}
    					 
    #image {height: 100%;
           width: 100%;}
    </style>
    </head>
    <body>
    
    <div>
    <img src="phpwp.jpg" alt="php" title="php" id="image" border="0" />
    </div>
    
    
    </body>
    
    </html>
    Obviously use your own image and see what happens. Hope this is what you meant.

    Kind regards,

    LC.

  • #3
    New Coder
    Join Date
    Oct 2012
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Boss,

    I am talking about IE. It is not working in IE browser. Otherwise it is working good. Could you let me know why it was happens in IE?

  • #4
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    922
    Thanks
    76
    Thanked 29 Times in 29 Posts
    Apparently, this will work:

    Code:
    -ms-border-radius: 10px;
    Regards,

    LC.

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 725 Times in 719 Posts
    If you are using PIE.htc, you may need to set the background colour specifically for IE, and possibly position:relative as well.

    IE9 supports border-radius, but no previous versions do.

  • #6
    New Coder
    Join Date
    Oct 2012
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes you are right. IE 9 only supported border-radius property. Previous of IE versions doesn't support this method.


  •  

    Posting Permissions

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