Rounded Corner Boxes the CSS3 Way

To create a CSS3 rounded corner box, simply start with your box element and apply your 4 corner images, separated by commas.


  1. .box {
  2. background-image: url(top-left.gif), url(top-right.gif), url(bottom-left.gif), url(bottom-right.gif);
  3. }
We don’t want these background images to repeat, which is the normal behaviour, so lets set all their background-repeat properties to no-repeat.
  1. .box {
  2. background-image: url(top-left.gif), url(top-right.gif), url(bottom-left.gif), url(bottom-right.gif);
  3. background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  4. }
Lastly, we need to define the positioning of each corner image.
  1. .box {
  2. background-image: url(top-left.gif), url(top-right.gif), url(bottom-left.gif), url(bottom-right.gif);
  3. background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  4. background-position: top left, top right, bottom left, bottom right;
  5. }

2 comments: