Dreamweaver Tutorials back to dreamweaver tutorials home pagee contact form tutorial page
A value is required.Invalid format.A value is required.Invalid format.
Social Networks Our YouTube.com Channel Facebook Page

CSS 3 Rounded Corners - Dreamweaver Tutorial

The eagerly anticipated CSS3 Rounded Corners property is saving webmasters so much time by allowing them to easy create curved corners in their web design projects with just a simple line of CSS code. Discover how to apply curved corners to your div tags and backgrounds with in Dreamweaver video tutorial.

CSS Curved Corners

Find out how to create CSS3 rounded corners and give your right angled div tags and backgrounds some curvy stylishness in this Dreamweaver video tutorial. The rounded corners property in the new CSS3 line up of styles is an absolute godsend and will save you time from making all of those fancy curved corners graphics in Fireworks or Photoshop and will also save your page loading time.

There is no html mark-up for rounded corners so you do not need to add a span tag or any other html rounded corners property to get rounded edges. The curved corners are produced with some simple curved corners css properties which are so easy to remember.

The great thing about the curved edges css is that you can make individual rounded corners too. So if you just wanted to style one corner with the rounded corners css, the rest of the div background would remain at right angles which open up some great possibilities. The other great thing about CSS3 rounded corners is that you can set a different sized curved corners css radius to each corner so one of your rounded corners can be 30 pixels corner radius and the other can be 15 pixels.

You will need to apply the –Moz prefix to get the CSS3 rounded corners to work in Firefox, Flock and SeaMonkey. You will also need to use the –Webkit prefix for safari and chrome to get rounded corners to work in their browsers. Once the curved corners CSS have been fully approved by the WC3, you can expect that the prefixes will no longer be in use in the near future.

Don’t forget, you can download some curved edges CSS tutorial files located just under the Dreamweaver tutorial video above. The tutorial files include full examples of curved corners css and a guide for you to keep on your version of adobe Dreamweaver. For a more detailed Dreamweaver article tutorial you can click on the following link: CSS Rounded Corners in Dreamweaver.

CSS Text Shadows - Dreamweaver article tutorial

CSS3 Box Shadows - Dreamweaver article tutorial

CSS3 Box Shadows in Dreamweaver - Dreamweaver video Tutorial

blog comments powered by Disqus

Dreamweaver Website Templates

Web Hosting Plans That I Use

  • GoDaddy.com Hosting Plans!Godaddy Hosting
  • Unlimited Hosting at HostGatorHostGator Hosting
  • JustHost.com Unlimited DomainsJustHost Hosting
  • Hosting just $4.88/month! - PowwebPow Web Hosting

PHP Luxury Contact Form Tutorial

Great Premium Shopping Cart

  • BigCommerce makes it easy to sell online. Click here to try it free!BigCommerce

    I highly reccommend this product for people who want to create an online store. it's easy to set-up and add products to and easy to manage back-of-house. Can also be used as an Ebay store.

Email Marketing - Recommended links

CSS Drop Down Menu - Dreamweaver

Floating Menu - Dreamweaver

Tabbed Navigation Menu

CSS Text Boxes in Dreamweaver

CSS 3 in Dreamweaver

J Query in Dreamweaver

Transparent Overlays Dreamweaver

CSS in Adobe Dreamweaver

All Types of Links In Dreamweaver

Positioning Elements in Dreamweaver

Unordered List Images Dreamweaver

Create an RSS Feed in Dreamweaver

Website Typography in Dreamweaver

Expanding Text Boxes - Dreamweaver

Make a Donation

Donate for Dreamweaver Tutorials