How To Develop CSS3 Border Radius Tool

Posted on 02. Aug, 2010 by Zeeshan Rasool in Coding, How-To 5

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

CSS3 Border Radius Tool

Here is the CSS which I used in PHP file:

.outPut {
	-moz-border-radius:10px 10px 10px 10px;
	background-color:rgba(166, 167, 244, 0.8);
	display:table-cell;
	font-size:2em;
	height:200px;
	margin:0 auto;
	min-height:200px;
	text-align:center;
	vertical-align:middle;
	width:320px;
}

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

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

label {
	font-size:1.1em;
	margin:4px 10px 0 0;
}

Here is jQuery code:

$(document).ready(function(){
    $(".radiusInput").keyup(function()
    {$(".code-border-radius-equal").text(function(b){
    var c=$(".radiusInput").val();return(c+"px")});
    var a=$(".radiusInput").val()+"px";
    $(".outPut").css({"-webkit-border-radius":a,"-moz-border-radius":a,"border-radius":a})
    });

DEMO Download

Most Popular and Best WordPress Themes

WordPress Themes

4198 Sales | $35

Karma - Clean and Modern Theme

4824 Sales | $35

Corona - Business & Portfolio Theme

187 Sales | $35

Studeo: Creative Agency Business

283 Sales | $35

Striking Premium Corporate Theme

6391 Sales | $40

King Size - fullscreen Wordpress Theme

3035 Sales | $35

Strange - Modern Portfolio WP Theme

246 Sales | $46

Core Minimalist Photography Theme

144 Sales | $35

Equilibrium: Clean and Modern Theme

302 Sales | $35

inFocus - Powerful Professional Theme

6956 Sales | $35

Etherna - powerful and flexible Theme

622 Sales | $35

Garnish: Clean-Cut Wordpress Theme

1199 Sales | $35

Related Posts:

• 7 Useful CSS3 Code Generators
• Everything You Need to Know about CSS3 Color Techniques
• Best Examples of CSS3 Navigation and Menu Tutorials
• Newest Design Trends with Popular CSS3 Techniques
• 54 Awesome Tutorials To Satisfy The Appetite Of Any Web Developer
• 6 Important Syntax Highlighter WordPress Plugins
• 19 Popular CSS Tools For Web Developers and Designers
• A Comprehensive Guide to Web Terminology
• 25 Excellent Collection Of jQuery Tutorials
• Manipulating DOM CSS Properties Using jQuery
• 7 Free Online Button Maker Tools
• 45 Useful jQuery Tutorials And Techniques For Better UI
• Create a Beautiful Free Flash Website Using Wix Website Builder
• TN3 Gallery Visual Image Rotation with jQuery
• 25 Must Have iPhone Apps for Graphic Designers

Tags: code, CSS, css3, development, How-To, JQuery, Tools

Author : Zeeshan Rasool

Zeeshan Rasool is a creative web developer and Blogger. He is currently working in PHP, Codeigniter and JQuery to create some interactive and attractive web apps.