CSS Rounded Corners in IE (a cross-browser chat bubble)

You can style your div-s to have rounded corners.

This is just a rounded container, works in all browsers including Internet Explorer.


 /* ROUNDED CONTAINER DIV CSS START*/  .rounded_container { -moz-border-radius: 15px; /* Mozilla Firefox*/ -webkit-border-radius: 15px; /* Google Chrome */ border-radius : 15px; /* Opera */ background: lightblue; border: 1px solid #ccc; padding: 20px; }  /* ROUNDED CONTAINER DIV CSS END */  


And you can create a chat bubble div that has only 3 rounded corners and 1 square corner like this:

This is a CSS Chat Bubble that displays the same in all major browsers including IE and Opera.

For chat bubble you have to specify each corner’s roundness separatedly like this:

 .chat_bubble { height: 50px; width: 250px; background: lightblue; border: 1px solid #ccc; padding: 20px;   /* Mozilla Firefox */   -moz-border-radius-bottomleft: 15px;   -moz-border-radius-bottomright: 15px;   -moz-border-radius-topleft: 15px;   /* Chrome */   -webkit-border-top-left-radius: 15px;   -webkit-border-bottom-right-radius: 15px;   -webkit-border-bottom-left-radius: 15px;   /* Opera */   border-top-left-radius: 15px;   border-bottom-left-radius: 15px;   border-bottom-right-radius: 15px; }  

For IE (Internet Explorer) rounded corners:

  1. Get curvycorners.js to your website from http://www.curvycorners.net/
  2. Add a meta tag to your website HEAD section
    <script type=”text/JavaScript” src=”path_to_your_dir/curvycorners.js”></script>
  3. Refresh page and IE round corner support is added with CurvyCorners JavaScript

The JavaScript will find and display rounded corners in browsers that don’t support rounded corners. Perfect way to solve the problem.  

Why use CurvyCorners?

CurvyCorners is designed to fill a gap in modern browser support for rounded corners on block elements while we wait for CSS3 to be finalised and supported by all browsers.

Currently Firefox, Safari and Chrome have support for the proposed CSS3 border-radius selector.

Will CurvyCorners use CSS border-radius if available?

Yes! CurvyCorners only does its magic on browsers that don’t have CSS3 border-radius support, namely IE and Opera.

Hope this saves someone some time! 

Post Author: Tom Pai