In all browsers, my divs display with rounded borders except for IE. I believe I need to add some compatibility CSS.
Check out this link for more details.
Here is the HTML code:
<div class="upper_button">
<a href="http://www.yahoo.com/" target="_blank"><h2>Blah2</h2></a>
</div>
<div class="upper_button">
<a href="http://www.google.com/" target="_blank"><h3>Blah</h3></a>
</div>
This is the CSS style being used:
.upper_button {
padding: 5px 20px;
width: 120px;
float: right;
height:22px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
background: rgb(147,206,222); /* Old browsers */
background: -moz-linear-gradient(top, rgba(147,206,222,1) 0%, rgba(117,189,209,1) 41%, rgba(73,165,191,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(147,206,222,1)), color-stop(41%,rgba(117,189,209,1)), color-stop(100%,rgba(73,165,191,1))); /* Chrome,Safari4+ */
background: linear-gradient(top, rgba(147,206,222,1) 0%,rgba(117,189,209,1) 41%,rgba(73,165,191,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#93cede', endColorstr='#49a5bf',GradientType=0 ); /* IE6-9 */
-moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.2),
inset 0px 0px 0px rgba(255,255,255,0);
-webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.2),
inset 0px 0px 0px rgba(255,255,255,0);
text-shadow: 0px -1px 0px rgba(000,000,000,0),
0px 1px 0px rgba(255,255,255,0.3);