Home / Articles / Programming languages / Markup languages / HTML & CSS / Box with rounded corners using CSS3

Box with rounded corners using CSS3

Box with rounded corners using CSS3
 
Box with rounded corners using CSS3
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


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:

<div class="nice-box"></div>

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.


 

Read also

Simple CSS3 gallery with zoom effect

Simple CSS3 gallery with zoom effect

Creating CSS3 button with rounded corners

Creating CSS3 button with rounded corners

Creating an image slider using only CSS3

Creating an image slider using only CSS3

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation