CSS3 Box with Rounded Corners

Create rounded corners with CSS3 border-radius property

Creative CSS

Designing with CSS – Rounded Corners

The CSS3 border-radius property allows web designers and developers to create rounded corners easily in their design elements, without the need for corner images or the use of multiple div tags. At present boder-radius property enjoys widespread browser support.
 
 

CSS3 Generator

If you are not very comfortable with CSS, or would like to have CSS codes auto-generated for you to save time, here is a useful and handy tool called CSS3 Generator. This simple tool created by Randy Jensen could be used for most basic design elements like rounder corners, box-shadow, text-shadow, etc on your webpages. It will create some cross-browser CSS3 code based on whatever values you want.

In this article I shall illustrate generation of code for rounded corners using border-radius property of CSS3 with the help of this tool. The procedure is simple. You chose your design element from the drop-down menu, enter your values, and get your auto-generated code for your project.

CSS3 Generator

Are your borders going to be rounded equally? Yes

Border Radius: 10px

Your Code:

-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;

Border Radius

Are your borders going to be rounded equally? No

Border Radius
Top Left: 10px
Top Right: 10px
Bottom Right: 20px
Bottom Left: 20px

Your Code:

-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;

Browser Compatibility:

Firefox 3.0+ Chrome 4.0+ Safari 3.1+ IE 9+ Opera 10.5+

Border Radius

Example of Box with Rounded Corners

This example uses the CSS3 border-radius property and currently it will not work in all browsers. I am using this code on my blog as you could see various boxes with rounded corners like bread-crumb bar, search bar, author box.

CSS Code:

.box {color:#807970;background:#f9fafa;border:1px solid #dbe1e6}
.corner {border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px}

HTML:

<div class="box corner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
</div>

Example:

CSS3 Box with Rounded Corners
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Browser Support
This box created with border-radius property of CSS3 should have rounded corners at present for Safari (version 5 onward), Chrome (version 5 onward), Opera (version 10.5 onward) and IE9.

Mozilla Firefox (version 1.0 onward) supports border-radius with the -moz- prefix. However, it is only since version 3.5 that the browser has allowed elliptical corners. Prior to version 3.5, the browser only accepted one value per corner, resulting in corners with equal horizontal and vertical radii.

Safari and Chrome (and other webkit based browsers) have supported border-radius with the -webkit- prefix since version 3 (no longer needed from version 5 onward).

Even Microsoft have promised, and demonstrated in their recent preview release, support for border-radius from Internet Explorer 9 onward.

CSS3 Generator
Web Host for your WordPress Blog
If you are looking for a web host that will provide hosting environment for WordPress, BlueHost is one of the best choices. My website and blog are hosted by BlueHost.

Click Here to Signup for BlueHost
Small Business Website Design
Get a professionally designed special custom five-page website ideal for small business that need an online presence as well as personal sites or informational sites at an amazing price of only $125.
Visit our website to learn more about Small Business Website Design

Previous Article
Next Article
CSS3 Box with Shadow
Create box shadow with CSS3 box-shadow property
 
Related Posts with Thumbnails
Admin/Author Admin/Author: Subrato Paul, owner of GoldenTwine Informatics founded in April 2003, lives in Kolkata, India. He is a freelance website designer, Internet marketer, social media enthusiast, and blogger. He writes in his blogs and as a guest writer about marketing and social media, eCommerce, website design and development, and his website.
RSSDid you like this article? If you're new to goldenTwine blog, you may want to
Subscribe to RSS feed: | Comments RSS | Email Subscription
Social Media:
Short Link: https://wp.me/pPMoR-jB | Thanks for visiting!

2 Comments

    • Modern browsers are adopting CSS 3. I am using CSS 3 where the features don't cause any problem with the browser. For example, rounded borders may or may not show up depending upon the browser but won't cause any problem.

One Trackback

Post a Comment

Your email is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*
*

Notify me of followup comments via e-mail. You can also subscribe without commenting.

This site uses Akismet to reduce spam. Learn how your comment data is processed.