Wednesday, October 04, 2006

Rounded Corners for Mozilla/Firefox

In Mozilla, -moz-border-radius can be used to give borders rounded corners. This is one of the proposals leading to the proposed CSS 3 border-radius property.

Syntax:
-moz-border-radius: <border-radius>{1,4} | inherit

Example
.box {
  background-color: #fb2;
  border: 1px solid #000;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px; /* for WebKit */
  padding: 15px;
}

Individual corners
The border-radius can be specified individually for each corner

  border-top-right-radius
  border-bottom-right-radius
  border-bottom-left-radius
  border-top-left-radius

http://developer.mozilla.org/en/docs/CSS:-moz-border-radius

No comments: