How To Develop CSS3 Border Radius Tool

by Zeeshan Rasool in Coding, How-To 5

• Tweet
• 

• Tweet
• 

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

You Might Also Like

1. 7 Useful CSS3 Code Generators To write CSS manually is not tough, if you know...
2. Everything You Need to Know about CSS3 Color Techniques CSS3 is revolutionizing Web by introducing a number of totally...
3. 20 Tutorials to Develop WordPress Plugin WordPress has become more important application for bloggers and even...
4. 54 Awesome Tutorials To Satisfy The Appetite Of Any Web Developer When a roundup of tutorials is done, they usual focus...
5. 19 Popular CSS Tools For Web Developers and Designers Even if you know CSS very well some tasks take...

Follow @pelfusion

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.