The CSS3 there are properties that allows web developers to easily utilise rounder corners in their design elements, without the need for corner images.
We often use to search for round corner images of Tables and Div for our Websites to make it look beautiful.
So here is our search end.CSS has provide us some properties by which we can give style to the corners of Tables and Div.
May be many of you aware of it but i found it useful and also new for me.So i thought i should share it with all of you.
Rounder corners can be created independently using the following four individual border-radius properties of CSS.For all four corners simultaneously using the border-radius shorthand property. > border-top-left-radius > border-top-right-radius > border-bottom-right-radius
> border-bottom-left-radius
USE: =======
The border radius properties can each accept either one or two values, expressed as a pixel or a percentage .
Examples
border-top-left-radius: 10px 5px; border-bottom-right-radius: 10% 5%; border-top-right-radius: 10px;
>Where two values are supplied these are used to define, in order, the horizontal and vertical radii(x-axis,y-axis),which in turn determines the curvature of the corner of the outer border edge.
>Where only one value is supplied, this is used to define both the horizontal and vertical radii equally.
>If either value is zero, the corner will be square, not round.
Ex:-
#box_search_help_bubble{
height: 367.5px;
width: 540px;
border: 5px Solid #ccc;
z-index: 250;
background: #fff;
position: absolute;
margin-left:2cm;
top: 100px;
left:300px;
border-top-left-radius: 20px 20px;
border-top-right-radius: 20px 20px;
border-bottom-right-radius: 20px 20px;
border-bottom-left-radius: 20px 20px;
}
Hi
Browser Support
At present Opera (version 10.5 onward), Safari (version 5 onward) and Chrome (version 5 onward) all support the individual border-*-radius properties.
Mozilla Firefox (version 1.0 onward) supports border-radius with the -moz- prefix, although there are some discrepancies between the Mozilla implementation and the current W3C specification (see below).
Update:Recent Firefox versions support border-radius without the -moz- prefix.
For more detail on this please go to http://www.css3.info/preview/rounded-border