Page 2
This is the styling for the <div> on this page:
margin: 0.5in auto;
border: 0px solid #fff;
color: #fff;
width: 60%;
padding: 20px;
text-align: left;
background-color: #33F;
border: 3px solid #fff;
background-image: url(/images/backrepeat.jpg);
background-repeat: repeat-x;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
Note that the background repeats, and that the box is styled with a
percentage value.
Page 3
Style for this div:
margin: 20px auto;
color: #fff;
width: 500px;
height: 550px;
padding-left:2em;
background-image: url(/images/backtest.jpg);
background-repeat: no-repeat;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
The photo is cropped because of the fixed box size.
Page 4
This is the styling for this div:
margin: 0.2in auto;
color: #fff;
width: 60%;
padding: 20px;
text-align: left;
background-color: #33F;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomright: 20px;
You don't have to round all the corners of a box. There are some
constraints, mostly common sense, about box styling. For example, it
makes no sense to style a box with rounded top corners, a top border
but no side border; and the results can be relied upon to look odd!
You can of course have rounded top corners with a border to left,
top and right (but none on the bottom). That is how the tabs are
styled.
Page 5
Left aligned
srbstrnwrtnwrtnbqebgvqervswtbrnhy wrnbqbtwbtrbn
Centred
Right aligned
These boxes have fluid height and fixed width. curvyCorners
correctly applies text alignment styles.
Page 6
We hope you find these demonstrations helpful.
For further information about curvyCorners, visit the web site.
Latest builds are available from the repository at Google Code.
And please, if you use curvyCorners on a commercial basis, make a
donation!