CSS3 Borders
CSS3 offers you a lot of great ways to dress up the borders on your elements. You can round the corners, add shadows, and even use images to create your borders. There are a lot of properties that can help you adjust your borders. CSS3 includes all the border properties that were in CSS1 and CSS2, these properties are:
Most of these properties should be familiar to you, but there are a few new ones in CSS3.
Rounded Corners with
Most people are familiar with creating rounded corners with CSS3. You can define each corner separately with the four
Create Graphical Borders with the
CSS3 lets you dress up your borders with images.
You choose one image that has the edges you want on your borders, and then define where to cut the image to display the corners and sides.
To define your border image, you first take an image that you want to use as the borders. Think of this image as a box, where the edges are pulled to the sides of your box. You then define exactly where the edges of your borders should be on the image. The syntax is:
Place the URL of the image you want to use for your borders. Then the four numbers are (in order):
Finally, set how you want the images to fill the spaces around the top, bottom, and sides. The keyword
When dealing with paged media or columns, the styles on your elements carry over from one page or column to the next. But you might want the border to not display at the bottom and top of elements as they cross the edge of the page or column.
CSS3 provides a property to define how you want the backgrounds and borders to continue across the page or column barrier:
CSS3 adds the property
Rounded corners are where a lot of people started using CSS3. You use the
Dressing up your borders is a great way to add fun features to your web designs, and CSS has always given you a lot of ways to decorate your site borders. Change the color, width, and style of the borders.
border-top-colorCSS2border-right-colorCSS2border-bottom-colorCSS2border-left-colorCSS2
border-colorCSS1border-top-styleCSS2border-right-styleCSS2border-bottom-styleCSS2border-left-styleCSS2border-styleCSS1border-top-widthCSS1border-right-widthCSS1border-bottom-widthCSS1border-left-widthCSS1border-widthCSS1border-imageCSS3border-top-right-radiusCSS3border-top-left-radiusCSS3border-bottom-left-radiusCSS3border-bottom-right-radiusCSS3border-radiusCSS3border-topCSS1border-leftCSS1border-rightCSS1border-bottomCSS1border-collapseCSS2border-spacingCSS2borderCSS1box-decoration-breakCSS3box-shadowCSS3
Most of these properties should be familiar to you, but there are a few new ones in CSS3.
Rounded Corners with border-radius
Most people are familiar with creating rounded corners with CSS3. You can define each corner separately with the four
border-top-right-radius etc. styles or style them all with the shorthand propertyborder-radius.Create Graphical Borders with the border-image Property
CSS3 lets you dress up your borders with images.
You choose one image that has the edges you want on your borders, and then define where to cut the image to display the corners and sides.
To define your border image, you first take an image that you want to use as the borders. Think of this image as a box, where the edges are pulled to the sides of your box. You then define exactly where the edges of your borders should be on the image. The syntax is:
border-image : <uri> [<number> | <percentage>]{4} / <border-width>{1,4}? [stretch | repeat | round]{0,2}Place the URL of the image you want to use for your borders. Then the four numbers are (in order):
- height of the top edge from the top two corners
- width of the right edge from the two right corners
- height of the bottom edge from the bottom two corners
- width of the left edge from the left two corners
Finally, set how you want the images to fill the spaces around the top, bottom, and sides. The keyword
stretch stretches the borders to fit the space, without adding or dupicating anything. Here's an example of the stretch keyword. The repeat keyword fills the edges with the border repeated as many times as needed to fill the space, and any extra repeated as much or little as there is space left. Here's an example of the repeat keyword. The round keyword fills the edges with as many full copies of the border as fit and then rounds out the remainder. Here is an example of the round keyword.Define How Columns and Pages Affect Styles on an Element
When dealing with paged media or columns, the styles on your elements carry over from one page or column to the next. But you might want the border to not display at the bottom and top of elements as they cross the edge of the page or column.
CSS3 provides a property to define how you want the backgrounds and borders to continue across the page or column barrier:
box-decoration-break. This property has two values: slice and clone. With the slice keyword, the box is cut at the edge of the column or page as though the break wasn't there. The clone keyword repeats the border and background as if the box started over completely after the break.Add Shadows and Round the Corners
CSS3 adds the property
box-shadow to help you add shadows around your elements. You can define the shadows with the color of the shadow, the location, the size of the shadow, and then amount of blurring.Rounded corners are where a lot of people started using CSS3. You use the
border-radius property to change the corners to be as curved or straight as you need them to be.And Don't Forget the CSS2 and CSS1 Border Properties
Dressing up your borders is a great way to add fun features to your web designs, and CSS has always given you a lot of ways to decorate your site borders. Change the color, width, and style of the borders.
Source...