How to Create Round Corners on a Spry Tabbed Panel in Dreamweaver CS5

The spry tabbed panel control offers Dreamweaver CS5 developers with a way to create tabs at the top of your Web pages. Using CSS with the tabs, you can create rounded corners to match the other elements of your Web pages. The CSS "border-radius" property lets you set up rounded corners for each of your tabs.

Instructions

1. Open the Dreamweaver CS5 software on the desktop and open your Web project. Double-click the page you want to use to display the tabs.

2. Click "Insert" in the main Dreamweaver menu and click "Spry Tabbed Panel." A layout with two tabs displays. Click the first tab to display the properties panel at the bottom of the window.

3. Type the rounded radius pixel value in the "border-radius" property. For instance, type "15px" and press "Enter" to view the rounded corners. If you are not satisfied with the corners, increase the pixel value. Higher pixel values increase the radius of the rounded borders.

4. Click "Save" after you finalize the rounded settings. Open the file in your browser to test the changes.

References

• Adobe: Tabbed Panels Widget Sample
• CSS 3: Border-radius: Create Rounded Corners with CSS