Skip navigation
Currently Being Moderated

Rounded corners on a Spry Menu Bar 2.0

Oct 27, 2010 12:28 PM

Hi I saw the video on Adobe TV where Dreamweaver Product Manager Scott Fegette shows us how you can make rounded corners with css3 and I was wondering if you can use that to make the Spry Menu Bar 2.0 have rounded corners as well, and if so where in all that code would you put it?

  • Currently Being Moderated
    Oct 27, 2010 4:14 PM   in reply to Jolinar83
    Mark as:
  • Currently Being Moderated
    Oct 27, 2010 5:21 PM   in reply to Jolinar83

    Sorry, not one of the better examples to help you.


    Basically, there are several ways to get rounded corners for the tabbed panels.


    The safest way is to place a background image to the tabs giving the illusion of rounded corners. This is the way that most rounded corners are represented today.


    A more exciting way is to round the corners using CSS3. This will effect rounded corners in Firefox, Safari, Chrome, Opera, and IE9. There is absolutely no support for border-radius in older versions of IE.


    So your choices are to consider this a case of progressive enhancement, where modern browsers render curves while older browsers simply do rectangular corners; or you can employ some very complex (and often unstable) JavaScript that uses Microsoft's proprietary vector markup language to make curves in IE 8 and under.


    The prudent choice is to allow older versions of IE to render rectangular corners.

    Mark as:
  • Currently Being Moderated
    Oct 28, 2010 4:47 PM   in reply to Jolinar83

    In that I case I repeat one of my earlier answers,

    Have a look here


    This time I shall add that you need to page down the the section called


    Preparing to add embossed borders to the menu items.


    I do realise that you are not proposing to do any embossing of the borders, but what applies here applies to any modification to the borders.


    Oh! In case you had not realised, any styling that can be done using CSS can be applied to the Spry Widgets. This is especially true for the Spry UI widgets.

    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points