Let’s create rectangle or box with rounded corner using CSS3.

Jitendrasoft09
Posted by in CSS 3 category on for Beginner level | Points: 250 | Views : 5870 red flag
Rating: 4.5 out of 5  
 2 vote(s)

This article will try to explain the new features of CSS3 for making curve or rectangle with rounded corner easily and efficiently by Developer.


 Download source code for Let’s create rectangle or box with rounded corner using CSS3.

Introduction


CSS3 has a many new features like 2D/3D transformation, animation, multiple column layout and text effects much more. I will discuss one of the features that is creating curve or rectangle with rounded corner using CS3, let me tell you this new features makes comfortable to Developer to make design web page with beautiful efficiency.


Objective


CSS3 has features of rotating multiple images, robot animations and new pseudo classes. Let’s start how CSS3 is efficient to use for developer to design the web page in very comfortable and flexible level with fastest completion time. CSS3 is known as cascading style sheet level 3 version of CSS. It has  modularized capability which gives greater flexibility and making development and maintenance easier. It  supports multiple browser like firefox, opera, chrome, safari etc. It is nice to say CCS3 brings a lots of features better than existing version of CSS.


Let's discuss existing css2 was not provided property for creating curve, it was difficult or tedious for developer to create curve with complex code. It has many feature for developer to do programming faster and easier. CSS3 provides property border-radius for making rectangle or box with rounder corner easily.


Look into below figure it shows the rounded rectangle corners.

Show shapes.



Using the code


Let me explain what is border- radius. CSS3 provides border- radius property for making rounded corner rectangle or box with horizontally and vertically.


border-radius: 8px

border-radius: 8px /13px


border-top-left-radius:     1em 5em;

border-top-right-radius:    1em 5em;

border-bottom-right-radius: 1em 5em;

border-bottom-left-radius:  1em 5em;



Now we will discuss about above code. let me tell you first code shows rectangle to be converted with corner with horizontally and vertically with same size that is 8px and second code shows one for horizontal 8px and another for vertical 13 px.


We can decide which side needs to be changed as for making corner in rectangle. above four code are the code for left, right, top, bottom rounded corner.

Shows css file

I have opened the visual studio and mentioned the name of the project as JkCssExample. Look into below code that will be mentioned on aspx page.


It is nice to show the example of css3 where project is created to show rounded shapes.


Shows aspx page

Nicely we have done all the code, now will see the output so let's look output for the css3 example

Shows Output.


As I have added project file in attachment, download project file to go ahead to understand practically how actually works css3 in visual studio, let me tell you frankly practical makes perfect, go ahead and enjoy with happy coding. 


Now I have explained the part of CSS3 property which is to create rectangle or box with rounded corner, In this articles you have seen step by step to create the rounded rectangle or box as practically.


Conclusion

This article explains on how to create rectangle shapes with corner side without writing much code with easily and fast to design the web page. Hope you will be enjoying to learn the new features of CSS3.


Page copy protected against web site content infringement by Copyscape

About the Author

Jitendrasoft09
Full Name: Jitendra Kumar
Member Level:
Member Status: Member,MVP
Member Since: 3/26/2013 2:40:53 AM
Country: India
Jitendra Kumar If my post helps you, plz mark as an answer.
http://www.dotnetfunda.com/
Jitendra Kumar

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)