CSS3 Properties

BORDER-COLOR

-moz-border-top-colors, -moz-border-bottom-colors, -moz-border-left-colors, -moz-border-right-colors

One feature in CSS3 is the ability to assign colors to borders. We already had that in the past, but the new part is the ability to assign colors per border pixel width. So, if you have a border that is 5 pixels in width, you can define 5 different colors for each “layer” of border.

To do that we use the following property -moz-border-top-colors: value; Using this property we can then define the color for each pixel on the top border, the bottom border, the left border, and the right border. ame for bottom, left and right one. The value is defined in pixels.

Support: This feature is only supported by Firefox at this point

EXAMPLE

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>

<style type="text/css">
div {
    width:550px;
    height:80px;
    padding:10px;
}
.border-style{
    border: 14px solid #000;
    -moz-border-top-colors: #cccccc #cccccc #cccccc #cccccc #cccccc #ff4064 #cccccc #cccccc #cccccc #cccccc #cccccc #cccccc;
    -moz-border-bottom-colors: #7976ff #7976ff #7976ff #ff4064 #ff4064 #ff4064 #fcff07 #fcff07 #fcff07 #24ff52 #24ff52 #24ff52 #7976ff #7976ff;
    -moz-border-left-colors: #7976ff #7976ff #7976ff #ff4064 #ff4064 #ff4064 #fcff07 #fcff07 #fcff07 #24ff52 #24ff52 #24ff52 #7976ff #7976ff;
    -moz-border-right-colors: #7976ff #7976ff #7976ff #ff4064 #ff4064 #ff4064 #fcff07 #fcff07 #fcff07 #24ff52 #24ff52 #24ff52 #7976ff #7976ff;
}
</style>
</head>
<body>
    <div class="border-style"></div><br /><br />
</body>
</html>

BORDER-RADIUS

With CSS3, you can apply a border-radius property to CSS elements. Here are some examples:

1
2
3
4
5
6
7
8
#radius-example-one {
  background: #CCCCCC;
  border-radius: 5px;
}
#radius-example-two {
  border: 5px solid #CCCCCC;
  border-radius: 5px;
}

In order to make this work on every browser, consider using vendor prefixes. Below is an example for Safari, Firefox, and the rest (in that order). These days is more conventional to just use border-radius, however.

1
2
3
4
5
.round_corners {
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
}

In the case in which a background image is set for that particular element, the background will be cropped on the round corners.