How To Develop CSS3 Border Radius Tool

CSS3 is rocking the web design and web development life. You can get amazing and awesome effects and style using it. CSS3 selectors provides you a variety of functions and features. Here on Pelfusion I’ve created a simple tool which will be used to make an element corners rounded. In this simple tool just pass your value and CSS3 code will be generated. This is done using jQuery and CSS3. I have used border property of CSS3 to get this simple effect. To develop this tool you will need only two files, one PHP file and other JS file, CSS code is added internally in PHP file. You can download source code by clicking download link at the bottom of post.

You may also be interested in:

Newest Design Trends with Popular CSS3 Techniques
Everything You Need to Know about CSS3 Color Techniques
7 Useful CSS3 Code Generators
Best Examples of CSS3 Navigations and Menu Tutorials

Here is the CSS which I used in PHP file:

[css autolinks=”false” classname=”myclass” collapse=”false” firstline=”1″ gutter=”true” highlight=”1,2,3″ htmlscript=”false” light=”false” padlinenumbers=”false” smarttabs=”true” tabsize=”4″ toolbar=”true”]

.outPut {
-moz-border-radius:10px 10px 10px 10px;
background-color:rgba(166, 167, 244, 0.8);
margin:0 auto;

.Code {
-moz-border-radius:10px 10px 10px 10px;
background:none repeat scroll 0 0 rgba(255, 255, 255, 0.2);
margin:60px 0 20px;

input{-moz-border-radius:5px 5px 5px 5px;
background-color:rgba(255, 255, 255, 0.5);
border:1px solid #D4CFBD;
padding:2px 5px 2px 2px;

label {
margin:4px 10px 0 0;

Here is jQuery code:

[code lang=”js”]
var c=$(".radiusInput").val();return(c+"px")});
var a=$(".radiusInput").val()+"px";

DEMO Download

5 thoughts on “How To Develop CSS3 Border Radius Tool”

  1. Pingback: 50 Refreshing CSS Tutorials, Techniques and Resources | Prabaharan CS Blog
  2. Pingback: 50 Refreshing CSS Tutorials, Techniques and Resources
  3. hey this good technq for creating round curvy box but its in demo whn i click i cnt see in my browser why? i hve latest FFox and IE

Leave a Reply

Your email address will not be published. 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>