CSS3 Border Properties

Border Radius
The CSS3 border-radius property allows web developers to easily utilise rounder corners in their design elements, without the need for corner images or the use of multiple div tags, and is perhaps one of the most talked about aspects of CSS3.
Since first being announced in 2005 the boder-radius property has come to enjoy widespread browser support (although with some discrepancies) and, with relative ease of use, web developers have been quick to make the most of this emerging technology.
Here’s a basic example:
This box should have a rounded corners for Firefox, Safari/Chrome, Opera and IE9.
The code for this example is, in theory, quite simple:
#example1 {
border-radius: 15px;
}
However, for the moment, you’ll also need to use the -moz- prefix to support Firefox (see the browser support section of this article for further details):
#example1 {
-moz-border-radius: 15px;
border-radius: 15px;
}
Border Images
Border images are one of the trickier CSS3 techniques, but after you figure out how they work, you can achieve quite remarkable results. It’s the best way to box content that is wrapped in a div. If your thing is drop shadows, or bevelled edges, with CSS3 you can now achieve this with just a single image. You won’t need to bother with slicing the image, inserting additional divs for the left and right edge of the box, nor will you have to deal with their alignment across browsers.
The syntax is as
border-image: url(path_to_border_image) A [B C D] [type]
path_to_border_image: image to be used for the border.
A,B,C,D: where to slice the image, dividing it into 9 portions:
A: height of top strip
B: width of the right strip
C: height of bottom strip
D: width of left strip
type: how the browser should apply border to the edges of the element

Get industry recognized certification – Contact us

Menu