< Back
Document Subject: IE9 and border-radius not working in Notes
Hint Short Cut: Add this to your code & documentation to help you find this page.
http://#ie9-border-radius or http://A555F9/nn.nsf/ByAlias/ie9-border-radius

Internet Explorer 9 allows the use of border-radius at last for curvy rounded div borders without using silly little images. Would not work in a Lotus Notes domino page though. My colleague worked it out.




The answer is to use a field called: $$HTMLFrontMatter

Make $$HTMLFrontMatter a computed for display text field that is hidden from browser and notes on each form you use.

REM {This means that ie9 will allow border-radius to work};
"<!DOCTYPE HTML>"

Normally the top line says this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

This is telling the browser that HTML 5 is being used, not just old HTML , chrome and firefox and safari seem to handle this anyway, but IE is rubbish so needs to be told explicitly.

This can also help with canvas things apparently as well.

This code:

<div  class='bluebut'><a   href='#' onclick="alert('adam rules'); return false;">LATEST</a></div><br>

with this stylesheet then results in nice buttons with rounded corners and hover colour change

.bluebut {
  -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 5px;  
 /* border-right-style: none; */
 width:80px;  
 height:20px;  
 border: 2px solid white;
 /* background-color:#1959a1;  */
 text-align: center;
 margin: auto;
 margin-left:auto;
 margin-right:auto;
 padding:1px 1px 1px 1px;  
 }
.bluebut a {
 display:block;
 width:100%;
 color:white;
 text-decoration:none;
 font-family: Arial Narrow bold;
 font-weight: 200;
 /* text-shadow: 0.15em 0.15em 0.05em #333; */
 text-shadow: 0.1em 0.2em 0.2em #000;
 }

.bluebut a:hover {
 background-color:#6a96c3;
 }

.bluebut:hover {
 background-color:#6a96c3;
 }