5 replies
  • WEB DESIGN
  • |
I'm wondering if anyone here is using the border radius attribute in their designs and if you are how are you getting around the incompatibility with IE.

Kevin
#border #css #radius
  • Profile picture of the author AfroSamurai
    as far as i knw this property only work in WebKit browsers and FF and still not supported by IE
    {{ DiscussionBoard.errors[1373161].message }}
  • Profile picture of the author SimonFairbairn
    I just don't worry about it. Browser-specific CSS declarations are just ignored by browsers that don't support them and don't cause any further issues other than not looking as cool.

    There are JavaScript solutions out there to get IE to show rounded colours, but the overhead in processing time and bandwidth isn't really worth it just for a simple design effect.

    You can safely use a declaration like this:

    Code:
    .myCoolBorders { -moz-border-radius: 10px; -webkit-border-radius: 10px; border: 5px solid #000; }
    It'll show rounds in FireFox, Chrome and Safari and boring squared corners in IE.

    Si
    {{ DiscussionBoard.errors[1373488].message }}
  • Profile picture of the author wardo
    Just use the border radius attribute as normal and use the script found here to make it work in all browsers CurvyCorners - Beautiful rounded corners for your HTML boxes. You don't need to worry about processing overhead unless you have a huge site.
    {{ DiscussionBoard.errors[1380769].message }}
  • Profile picture of the author VisualWebEffects
    there is other ways to make rounded corners in css rather than using attributes that are not a standard yet. the border radius attribute is nice, but not fully supported yet.

    my suggestion would be to use compliant attributes to css 2.1, like this example:

    Style sheet:

    Code:
    .tbox {
    	background:#363bff; 
    	color:#fff; 
    	margin:0 15px; 
    	width: 80%;
    }
    
    .tbox p {
    	text-align: center;
    }
    
    .rtop, .rbottom {
    	display:block;
    	background:#fff;
    }
    
    .rtop *, .rbottom * {
    	display: block;
    	height: 1px;
    	overflow: hidden;
    	background:#363bff;
    }
    
    .r1{
    	margin: 0 5px
    }
    
    .r2{
    	margin: 0 3px
    }
    
    .r3{
    	margin: 0 2px
    }
    
    .r4{
    	margin: 0 1px;
    	height: 2px;
    }
    Html Code:
    HTML Code:
    <div class="tbox">
    <b class="rtop"><b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b></b>
    <p>Content here</p>
    <b class="rbottom"><b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b></b>
    </div>
    as an alternative you can use the clip attribute if your wanting to use an image in the corners.
    Signature
    VisualWebEffects- Web Application Development, PC Software Development and Identity Design services
    {{ DiscussionBoard.errors[1381041].message }}
    • Profile picture of the author Kevin AKA Hubcap
      Thanks for the replies.

      I'm going to use border-radius for a site I'm working on now. FF and Safari users will get the rounded corners and IE will get the square.

      Oh well..

      Kevin
      {{ DiscussionBoard.errors[1382725].message }}

Trending Topics