Box with rounded corners using CSS3

There were always problems with rounded corners when working with boxes. To make it work, developers found a very tricky solution using several blocks (div) with a background image for each block. Every box with such corners was added with additional HTML code each time it was used. With the release of CSS3, the problem was solved.

In the examples below we are going to use CSS property border-radius which makes element's corners rounded. This CSS property doesn't work in older versions of browsers. But, vendor prefixes partially solve this problem for outdated browser versions except really old ones.

HTML code for content box:

General CSS styles for a box:

Appearance

CSS code

General CSS styles
.nice-box {
  background: #1ABFE5;
  width: 130px;
  height: 130px;
}

Below you can see all CSS styles used above including CSS styles which make box corner's rounded:

Appearance

CSS code

All CSS styles
.nice-box {
  background: #1ABFE5;
  width: 130px;
  height: 130px;
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  -khtml-border-radius: 9px;
  border-radius: 9px;
}

CSS styles above are cross-browser that means they work in older versions of browsers which don't support CSS3, but which support vendor prefixes for CSS property border-radius. If you don't need it, then it can be omitted and then it will look simpler:

.nice-box {
  background: #1ABFE5;
  width: 130px;
  height: 130px;
  border-radius: 9px;
}

Not in all cases a box should have all its corners rounded. For example to make rounded left and right corners in the bottom of the box, use the following:

Appearance

CSS code

Rounded left and right corners in the bottom
.nice-box {
  background: #1ABFE5;
  width: 130px;
  height: 130px;
  -webkit-border-radius: 0 0 9px 9px;
  -moz-border-radius: 0 0 9px 9px;
  -khtml-border-radius: 0 0 9px 9px;
  border-radius: 0 0 9px 9px;
}

Here is how the scheme works:

border-radius: 1 2 3 4;

Where:

1 - top left corner;
2 - top right corner;
3 - bottom right corner;
4 - bottom left corner.

Continue reading here: Triangles with different shapes and orientations using only CSS

Was this article helpful?

0 0