Home/ Questions/Q 9069487
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T17:26:29+00:00

I have this simple DIV that displays fine in Firefox, Chrome etc, but not

  • 0

I have this simple DIV that displays fine in Firefox, Chrome etc, but not IE. I have the following html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <style>
      div.example {
        position:absolute; 
        color:black; 
        text-align:left;
        border:2px solid#000;  
        border-radius:15px; 
        -moz-border-radius:15px; 
      }
    </style>
  </head>
  <body>
    <div class="example" style="height:15em;width:10em;"></div>
  </body>
</html>

In Firefox I get a rounded 2px black border. In IE get nothing. From what I’ve read, rounded borders isn’t supported until IE9, but I would like the 2px black border, even if it’s not rounded. Is there anyway to get this to look the same in Firefox, Chrome, IE & Safari ? Thanks in advance 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You are missing a space in the border style.
    Here is a working demo.

    HTML

    <div class="example">&nbsp;</div>

    CSS

    div.example {
    position: absolute;
    color: black;
    text-align: left;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    border: 2px solid #000;
    width: 10em;
    height: 15em;
}

    Also, as a side note,

    border-radius should always be called after -prefix-border-radius,

    example of order: 

    ...
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
...
    • 0