Rounded corner box using easy JS

Sunday, March 6, 2011 by Aslam - The Alexendra
Hi All,
I think most of us many times faced the situation when they need to make some rounded corner boxes (div) on their web page. Generally most of us go for two ways:
1) Use of -moz-border-radius , but this works in Mozilla browsers only not in IE
2) If one want to do that for support all browsers then he needs to achieve that using combination of 3-4 divs , setting some border images which already rounded. It means extra divs in your existing logic. So far i also follow that.

But recently i found a useful library which make any div available in your webpage to rounded corner with single line of code. So you just need to focus on your web design and just need to call one method to make rounded corner for whichever div you need. The library is DD_roundies. This gives same output in all browsers so you no need to take any extra actions. Here is the sample code and working demo i used.

The single line of code which you need to call is:
DD_roundies.addRule('#yet_another', '10px', true);

Here "#yet_another" is the id for the div which you need to make round, '10px' is the radius for border for roundness, and 'true' is a flag for support all browser.

Complete Code:
<style>
#yet_another
{
border
:1px solid #000;
background-color
:#ccc;
padding
:5px;
height
:100px;
width
:400px;
text-align
:center;
}
#up_another
{
border
:1px solid #000;
background-color
:#ccc;
padding
:5px;
height
:100px;
width
:400px;;
text-align
:center;
}

#capsule_round
{
width
:100px; height:100px; background:#FA0;
padding
:10px;
text-align
:center;
padding-top
:100px;
}
#totally_round
{
width
:100px; height:100px; background:#FA0;
padding
:10px;
text-align
:center;

}
</style>
<script src="DD_roundies_0.0.2a-min.js"></script>
<script>
/* EXAMPLES */
/* varying radii, "all" browsers */
DD_roundies.addRule('#yet_another', '10px', true);
DD_roundies.addRule('#up_another', '10px 10px 0px 0px', true);
DD_roundies.addRule('#capsule_round', '10000px', true);
DD_roundies.addRule('#totally_round', '10000px', true);
</script>

<body>

<div id="yet_another">
Rounding box with 10px radius
</div>
<br/>
<br/>
<div id="up_another">
Rounding box with upper round 10px radius
</div>
<br/>
<br/>
<div id="capsule_round">
Capsule Round
</div>
<br/>
<br/>
<div id="totally_round">
Total Round
</div>

Here is the link for working demo. You can check it in Firefox as well as in IE.
https://labsprojects-developer-edition.ap1.force.com/RoundCorners


Hope it will be useful for somebody who searching for that support :)

Thanks
Aslam Bari

3 comments:

RB Chowdary said...

Hello Aslam,
I worked this, but the bellow script was not calling,
DD_roundies.addRule('','',);
what is mean by DD_roundies...?

Aslam - The Alexendra said...

@RB: Please check the complete code, you must first download the js file and then call method like given in code for any div you have on page.

akhilonly007 said...

nice article on rounded corners ...
Aslam I needed a way to create round corners without the extra server calls that are incurred when using external JavaScript files or images. When your websites are serving millions of files a day you start to pay attention to how many files a particular page needs in order to load.
Specially in SFDC in my opinion it matters.
I prefer to go for round corners by only using CSS, I prefer to use following in few of my projects and it works for me

Get the Code: CSS

<style type="text/css">
.spiffy{display:block}
.spiffy *{
display:block;
height:1px;
overflow:hidden;
font-size:.01em;
background:#b20000}
.spiffy1{
margin-left:3px;
margin-right:3px;
padding-left:1px;
padding-right:1px;
border-left:1px solid #870000;
border-right:1px solid #870000;
background:#9f0000}
.spiffy2{
margin-left:1px;
margin-right:1px;
padding-right:1px;
padding-left:1px;
border-left:1px solid #6f0000;
border-right:1px solid #6f0000;
background:#a30000}
.spiffy3{
margin-left:1px;
margin-right:1px;
border-left:1px solid #a30000;
border-right:1px solid #a30000;}
.spiffy4{
border-left:1px solid #870000;
border-right:1px solid #870000}
.spiffy5{
border-left:1px solid #9f0000;
border-right:1px solid #9f0000}
.spiffyfg{
background:#b20000}
</style>


Get the Code: HTML

<div>
<b class="spiffy">
<b class="spiffy1"><b></b></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy3"></b>
<b class="spiffy4"></b>
<b class="spiffy5"></b></b>

<div class="spiffyfg">
<!-- content goes here -->
</div>

<b class="spiffy">
<b class="spiffy5"></b>
<b class="spiffy4"></b>
<b class="spiffy3"></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy1"><b></b></b></b>
</div>



for more details http://soniakhilesh.wordpress.com/2011/03/08/rounded-corners-with-simple-css/

Post a Comment