CSS3 Rounded Corners without Images

CSS3 has opened up a lot of doors for the world of web design as many features have created easy to institute, quick to load design options available. One of the most used simple CSS3 feature is called border-radius. border-radius allows the web designer to add rounded corners to divs, images, buttons, etc. It is even possible to create circles using border-radius and because the shapes made are purely code and no images, they will not affect your websites load time.

To create equal rounded corners using border-radius, create a class in your CSS file and call it whatever you want. for this example, we will name our class roundedCorners:

.roundedCorners {
	border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
}

Just add the class name to your HTML in the desired div, image, button, etc. tag and that selected area should now have rounded corners applied to each corner.

<div class="roundedCorners"> CONTENT </div>

OR

<img src="#" class="roundedCorners" />

You can ensure that you support all browsers by adding the browser specific border-radius calls as well as just border-radius. This may be unnecessary as more and more modern browsers understand the generic call, but it is still good practice to add browser specific calls to ensure cross-browser compatibility.

We can adjust the border-radius on each corner specifically so we can create some distinct shapes by using the following:

.roundedCorners {
      border-top-left-radius: 10px 5px;
      border-bottom-right-radius: 10% 5%;
      border-top-right-radius: 10px;
}

As shown above, you can specify each corner individually very easily. If you input one value into the call for a corner of your image, div, etc. the it will be an even rounded edge.

If you apply two values to a specific corner, it will calculate the border radii of the horizontal and the vertical edge creating an uneven corner which could be a cool unexpected effect.

Values can be input in either % or px. border-radius will calculate both.

To create circles, just add a border radius of 50% to your selected div, image, etc. (just make sure that your selected area is a square to begin with, a rectangle with rounded corners will not become a circle.)

.roundedCorners {
      border-radius: 50%
}

If you follow these simple steps, you will be able to add this easy, fun, and modern effect to your websites. Just add the CSS to your CSS file and then make sure you call the corresponding class in the place you want the effect to appear in your HTML file.

Have fun creating, Thanks for stopping by!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s