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

CSS3 Rounded Corners


Share this Dreamweaver Article:

Once upon a time, putting curved corners or rounded edges into your website designs using just CSS would have been the stuff of legend. Instead, Images would have to be made to mimic corners and would be placed as background images. It was a long and arduous task.

Now, it is entirely possibly to create curved edges or round corners using css. By the way, if you are viewing this page in Internet Explorer, you will not be able to see the css rounded corners in the box above this paragraph.

The css curved edges in this css tutorial are made using new CSS3 Capabilities. Any browser which utilizes the Moz prefix or Webkit prefix will be able to display CSS3 rounded corners. CSS rounded corners using the Moz attribute will display in Firefox, SeaMonkey, Flock and any other browser which uses the Gecko rendering engine. Conversely, CSS rounded corners using the Webkit prefix will display in Google Chrome and Safari.

Internet Explorer and Opera are working on CSS3 support as you are reading this but CSS rounded edges will not display in those browsers at this time.

1. Create a div to practice CSS Curved Edges

Let's create a simple div and give it a background color to practice styling CSS rounded corners with. You should copy and paste this code into web page:


  <div class="corners">

        <p>
        
  Contrary to popular belief, Lorem Ipsum is not simply 
  random text. It   has roots in a piece of classical 
  Latin literature from 45 BC, making it over 2000 years 
  old.

        </p>

  </div> <!-- end Corners class -->

2. Use CSS for Rounding all four corners

Copy and paste this CSS with the added CSS3 rounded corners attributes into a style sheet attached to your web page.

The height of the div has been set to auto with a width of 150 pixels. A background color has also been set so you can see the css rounded corners against a white background. Margins and padding have also been set to adjust the paragraph content inside of the div.

Optional paragraph styling has been added for you to copy and paste if you wish to do so.



 .corners {
  
    height:auto;
    width:150px; 
    background:#8BBEA9;
    margin:20px;
    padding:30px;
    -moz-border-radius:15px;    /* Firefox */
    -webkit-border-radius:15px; /* Safari and Chrome */
 
 }

 
 /*     Optional Paragraph Styling */

 .corners p {
 
        text-shadow:1px 1px 1px #FFF;
        text-align:justify;
        font-size:16px;
        margin:0;
        padding:0;
    
 }
  


If you copied and pasted the code correctly, you should end up with a div styled like this with all four curved corners styled using css.

You will see from this example that the div now has all four rounded corners using CSS. Styling all four CSS curved edges with CSS3 is fine, but what if you wanted to style only two corners, or how about just one styled corner using CSS3?





CSS3 Individual Rounded Edges Styling

To style individual corners you will need to know the following CSS3 rounded corners attributes. The syntax used between the css rounded corners with the Moz prefix and the css rounded corners with Webkit prefix is slightly different. Expect them to be integrated into one generic term once CSS3 is in full cross browser usage.

Here are the CSS rounded corners Styles for the Moz prefix that Firefox, Flock, SeaMonkey and all other up to date Gecko rendering engines use:

 
  /*  Styles for Firefox, Flock and SeaMonkey * /


    -moz-border-radius-topleft: 15px;
  
    -moz-border-radius-topright: 15px;
  
    -moz-border-radius-bottomleft: 15px;
 
    -moz-border-radius-bottomright: 15px;

Here are the CSS rounded corners styles for the Webkit engine that Chrome and Safari use:


  /* Styles for Google Chrome and Safari */

    -webkit-border-top-left-radius:15px;

    -webkit-border-top-right-radius:15px;

    -webkit-border-bottom-left-radius:15px;

    -webkit-border-bottom-right-radius:15px;


Individual CSS Curved Corners Examples

To apply individual CSS3 corners simply choose each curved corner attribute you want and apply it to the div styles. Most corners you apply will be between 5 pixels and 90 pixels but you can go as extreme as 200 pixels if you want.

This div has been styled to have corners on the top right and bottom left

This div has been styled to have the bottom left corner radius larger than the top right's















Remember to apply both the Webkit prefix and the Moz prefix if you want the CSS rounded corners to show in most of the major browsers.



Related Tutorials:

CSS3 Rounded Corners - video Tutorial

CSS3 Text Shadows - Video Tutorial

CSS3 Box Shadows - 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