Hi Murray,

my favorite in this case:http://forums.adobe.com/message/2957388#2957388

Sorry, the discussion did get a little 'off-topic', but that is also what these forums are for.

What everyone is saying is that yes, it can be done, but not in a reliable cross browser method. Even using tables has its problems which is o/k for personal web site, but not for commercial sites that you may construct.

The idea of using images is at the moment the most cross browser method, but using css3 and letting IE6-8 display without the drop shadow would be the simplest.

PZ

Hans-G.

Hi Murray

I will re-do a post on the subject, as the thinking has changed a lot over the last few months, especially since the release of the jQuery Mobile framework, and the use of things like htc as a 'fix' for IE<9 is now the recommended norm, (as this is then ignored by IE9, so no IECC required).

Paula

Hi Murray

I have created a dreamweaver cookbook item for this, (will be easier to find and edit as thinking on this changes).

The link is - http://cookbooks.adobe.com/post_Rounded_Corners___Border_Radius__css3_ and_IE_versi-18564.html.

Hope this helps, and if you, (or anyone else) have any comments/recommendations regarding the item please let me know.

Paula

Hi Murray

IE9 can support rounded corners on any corner by using the corner specific mark-up:

border-top-left-radius : Radius_value;

border-top-right-radius : Radius_value;

border-bottom-right-radius : Radius_value;

border-bottom-left-radius : Radius_value;

You can find examples of most of the new css3 properties supported by IE9 here - http://msdn.microsoft.com/en-gb/ie/ff468705.aspx#_CSS3_BG_Borders, along with other information specific to IE9.

As for the htc or jQuery fixes for older versions of IE, I would advise applying these to the lowest number of corners/items possible.

Paula

Hi Murray

As I say in the article, (and as pointed out by Al) all the IE none css3 methods rely on vml, (without using images and divs) and one uses them only after a lot of testing as they may have an adverse affect on functionality.

But even though I agree with Al, in that one should opt for the 'progressive enhancement' approach for IE < 9, if one must support IE < 9 then their use is the only simple x-IE-browser method and no worse than using svg for backgrounds, (supported in IE9 and Opera, and will be supported in FF and webkit).

PZ

Hi Al

I'm agreeing with you

Paula

Added: I am just saying that we can expect further problems along this line when people start using svg for backgrounds.

Message was edited by: pziecina

Hi Nancy

I did not think to include the odd syntax for firefox as the version 4 should, (how often have we heard that) be standard compliant, but if you do not mind I will copy your usage table into the cookbook posting?

I have also just added a new link regarding a htc file that adds 2 more css3 properties, - http://fetchak.com/ie-css3/, and whilst this also uses vml, it does add better, (more stable) vml support and functionality to the older IE browsers, border-radius, (again only for all 4 corners) box-shadow and text-shadow. The last two could be done using IEFilters but as the use of IEFilters is even more complex/controversial than using vml, the inclusion of the link may help others when used with extensive testing, I will repeat for the non-professionals that may be reading this, test, test, and test again when using such items.

Paula

Hi Murray

No one ever said that rounded corners are simple, and just to prove it Mozilla decided to implement their own format .

Anyway to change the subject slightly -

For those who may not already know, I did work for the dreaded evil empire, (Microsoft) a number of years ago and one of the people I know from then was a member of the team that developed vml, (he also helped write the specs submitted to the W3C for vml, and some IEFilters), so due to the debate on using vml for rounded corners I asked him his opinion, (I normally would not do so) and the opinion of a few others, (one is a developer on the webkit project), and here is a brief summing up.

From the vml developer - VML was developed to be used and script manipulated in a similar fashion to the canvas api and svg, and can be used quite safely for the creation of rounded corner graphics, but just like any other browser graphic drawing interface, (canvas and svg) the use should always be tested.

From the webkit developer - VML was in his opinion a better option than svg, and not using this when necessary would be like ignoring the html5 canvas completely because it produces undesirable results in some circumstances.

But both say, (as I have also pointed out in the article) if it works in your circumstances, use it, not to do so is like ignoring gif's because we can now use png's.

Paula

Good Morning Nancy

Are you saying that just by using these four lines I can get  rounded corners ?   I tried but nohing happened.  

{

-moz-border-radius: 20px;

-webkit-border-radius: 20px;

-khtml-border-radius: 20px;

border-radius: 20px;

}

Are there other  CSS properties hidden in a file ?

Thanks for your help, as always.

Thanks osgood.

I was trying to make my whole page with rounded corners.   So should I put it on my <head> section ?

Thanks.  Yes that was what I was trying to do.    Let me try your code and confirm back to you.  Thanks for the quick reply.   Have a great weekend.

I see.  Thanks my friend.   Sorry for the trouble.

Actualy what I was trying to do was Nancy's example

http://alt-web.com/DEMOS/CSS-Rounded-Corners.shtml

The centre box has rounded corners.  That's what I wanted to do.  Here is the code that I used.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title></title>

<style type="text/css">

<!--

.BG {

          background-color: #F0E8DB;

          -moz-border-radius: 20px;

          -webkit-border-radius: 20px;

          border-radius: 20px;

          background-color: #000000;

          border-bottom-color: #000000;

}

.style1 {font-family: Catull}

.style3 {

          font-size: 18px;

          font-family: Catull;

          font-weight: bold;

}

.style4 {

          font-family: Cambria;

          font-size: 14px;

          color: #663300;

}

-->

</style>

</head>

<body><center>

<table width="1604" border="0" cellpadding="0" cellspacing="0" class="BG">

  <!--DWLayoutTable-->

  <tr>

    <td width="290" height="31"> </td>

    <td width="1003"> </td>

    <td width="311"> </td>

  </tr>

  <tr>

    <td height="367"> </td>

    <td valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#00FF00">

      <!--DWLayoutTable-->

      <tr>

        <td width="1003" height="367" valign="top"><!--DWLayoutEmptyCell--> </td>

      </tr>

    </table>

    </td>

    <td> </td>

  </tr>

  <tr>

    <td height="1081"> </td>

    <td> </td>

    <td> </td>

  </tr>

</table>

</center>

</body>

</html>

Hi Nancy,

great and many thanks!

An interesting phenomenon I found: my DW fed with your code does show rectangular shapes, when I use design view, in live view contrast to it, it works like a charm! Loaded up to my server, all is ok too!

My replica of your code can be used as a evidence. Here is the link:

http://www.hansgd.de/AdobTest/roundedCornerNan/roundedCornerNanNeu2013 02.php.

Hans-Günter

Thanks nancy,

and of course I had no idea what these "vendor prefixes" are and maybe there are more people like me. And so they may be interested to this blog (e.g.):

http://demosthenes.info/blog/217/CSS3-Vendor-Prefixes

Hans-Günter