One of the new exciting technologies introduced in CSS3 is that borders can have round corners, they can also have shadows and images can be used as borders.
The new border properties in CSS3 are:
-border-radius
-border-shadow
-border-image
border-radius allows one to edit all four corners of the border.
border-shadow allows one to add a shadow to the border.
border-image allows one to use an image as a border.
Code
Output
4 Responses
-border-image is quite cool feature, and you can always hide that standard border, that appears in non-supported browsers, by setting its transparency to zero with rgba() property.
Can the corners of the top or the bottom only of a box be rounded? What would be the css code for doing that?
@Sandy
You only have to say (via css) the “this code goes for “X” box only” meaning. To do that you need a class. For example if you have MANY boxes with e.g red borders and you want ONLY ONE box with a blue border… you must do this:
Red boxes code:
.red-box {border:1px solid red;}
The above code means:
1)
.red-box = this is a class… it’s name is “red-box”. You recognize it by the dot (divs have an: “#”…. without quotes)
2)
{border:1px solid red;}
These are the properties of the class. The width of the border is a just 1pixel, it is solid (instead of dashed, or dotted e.g) and the color is red.
Blue boxes code
.blue-box {border:1px solid blue;}
The above code means:
Exactly the same. The only difference is the class name and the blue border instead of red. Of course you can choose various properties for your borders. This article shows one.
Let’s continue.
Imagine a class as an “X” point that a friend just told you to look when you were sitting on a bench in a park. Will you be able to understand this “X” point without any help? e.g “There… on the left corner”… or, “near the white car”…. or, “below the pine tree” or something?… No… You need a corner, a car, a tree. For css (“X” point) you need html (e.g car). Here is an example:
Css part:
.class-name {properties}
Html part:
Example:
Css part:
.red-box {border:1px solid red;}
Html part:
Content here
Divs as the boxes and class is the style which styles the box. This div will have red borders. Another one may have blue or whatever.
Css are easy to learn. Html also. Don’t hesitate to learn them. Extra knowledge is always good. Especially when things are so easy!
Hope I helped!
This is really cool, another nice way of scrapping heavy image files for pure CSS. The border image looks like it will take some mastering, I’m going to have a play with it now to see how far it can be pushed.