Hi there, it’s me again.
Today, i’m gonna talk about CSS3 border features.
By using CSS3, you can;
- create rounded borders (it was really a big problem cause we had to use images or junk javascript libraries)
- box shadows (it was also a big problem)
- use image files as border
without using a design program like Adobe Photoshop or some javascript plugins.
CSS3 Rounded Corners
In CSS3 creating rounded borders is a piece of cake. Just apply following css code to your elements.
Usage:
-webkit-border-radius: 5px 5px 3px 3px; -moz-border-radius: 5px 5px 3px 3px; -ms-border-radius: 5px 5px 3px 3px; -o-border-radius: 5px 5px 3px 3px; border-radius: 5px 5px 3px 3px;
Syntax:
border-radius: top-left-radius, top-right-radius, bottom-right-radius, bottom-left-radius;
You can see there are various codes for each browser.
Briefly,
Mozilla Firefox needs “-moz-” prefix,
Chrome and Safari needs “-webkit-” prefix,
Opera needs “-o-” prefix,
Internet Explorer needs “-ms-” prefix (will be deprecated),
and for last “border-radius” code is used for general CSS3 border styling.
CSS3 Box Shadow
With CSS3 you can use “box-shadow” property to add shadow to boxes.
Usage:
-webkit-box-shadow: 0 0 5px #d5d5d5; -moz-box-shadow: 0 0 5px #d5d5d5; box-shadow: 0 0 5px #d5d5d5;
Syntax:
box-shadow: h-shadow v-shadow blur spread color inset;
As you see, you should add “-webkit-” prefix for Safari and Chrome, “-moz-” prefix for Mozilla Firefox and lastly “box-shadow” property for general CSS3 Shadow effects.
Syntax:
box-shadow: (horizontal dimension of shadow, can be a negative value), (vertical dimension of shadow, also can be a negative value), (shadow blur amount), (hex code of shadow color)
CSS3 Border Image
To create border images for your elements, you should use border-image property.
Right now, Internet Explorer does not support border-image property.
For other browsers you should add prefixes just like other border properties(ex. “-moz-“, “-webkit-“, “-o-“)
Usage:
-moz-border-image:url(border.png) 30 30 round; -webkit-border-image:url(border.png) 30 30 round; -o-border-image:url(border.png) 30 30 round; border-image:url(border.png) 30 30 round;
Syntax:
border-image: source slice width outset repeat;
border-image-source: the path to the border image file.
border-image-slice: inward offsets of the border image.
border-image-width: width of border image.
border-image-outset: the amount by which the border image area extends beyond the border box.
border-image-repeat: type of repetition, repeat, round, stretch.
That’s all for now.
I’ll tell more about javascript equivalents of CSS border properties for fallback support and other CSS3 features later.
Enjoy your CSS3 styles, and have a nice day.