You are here : : Home > Free Resources > CSS Tutorials > CSS Borders Tutorial |
Free Web Design Resources
In this tutorial you will learn all about CSS borders. Learn how to create rounded corners in CSS and more! The CSS code for all these designs are also included below. Please do like, tweet or share this tutorial if you find it helpful!
The Css Border property is used to add borders to html elements. With the Css
Border Property width, color and border type can be changed. Border Radius can also be used to produce round corners in supported
Browsers like IE9, Opera 8+, Firefox and webkit browsers like Chrome &
Safari.
IE9 and Opera both use the same code to display Border Radius. For using Border Radius in Firefox and Webkit Browsers a prefix -moz-
for Firefox and -webkit-
for Webkit browsers like Chrome and Safari.
If your Browser supports Css Borders then you can see the following border effects.
border-(sub-property): (top) (right) (bottom) (left);
Here in sub-property we can use width, color, style and radius as sub-types of Border.
Four values need be to defined.
The values in the right are used to assign numerical values in pixels
for width and radius. Colors can be assigned to the borders by using RGB
Color Code, Hex Color Code or by Color names.
Syntax : border-color: (top) (right) (bottom) (left);
Example: border-color: #85C226 #F7C200 #4493A0 #DF127B ;
This property must be used if you are using any of the Border properties.
Without using this border-style property you won't see any borders at all.
Syntax : border-style: (top) (right) (bottom) (left);
Example: border-style: solid dotted groove double;
Syntax : border-width: (top) (right) (bottom) (left);
Example: border-width: 5px 10px 15px 20px;
Syntax : border-radius: (top-left) (top-right) (bottom-right) (bottom-left);
Example: border-radius: 0px 30px 70px 20px;
For displaying round corners Border Radius property is used.
IE9 and Opera use the same code.
For Firefox a prefix -moz-
needs to be added before the code. And for Webkit Browsers -webkit-
needs to be added before the code.
Box-shadow property for all the browsers.
1 2 3 4 5 6 7 8 9 10 11 12 13
<head> <style type=text/css> #example{width:120px; height:60px; border:thick solid; }</style> </head>
1 2 3 4 5 6 7
<body><div id=</body>example> </div>
Use values of width, height and border as defined above. Only add these codes to your existing stylesheet or make a new one.
1 2 3 4 5
#hemisphere{border-radius:100px 100px 0 0 ;
-moz-border-radius:100px 100px 0 0 ;
-webkit-border-radius:100px 100px 0 0 ;
}
Now we'll add more effects to the border by applying different values for width and using different border style.
1 2 3 4 5 6 7 8
#adv-hemisphere{border-width: 4px 30px 4px 30px;
border-style: groove ridge dashed groove;
border-color: #cc0000;
border-radius:100px 100px 0 0 ;
-moz-border-radius:100px 100px 0 0 ;
-webkit-border-radius:100px 100px 0 0 ;
}
Here all the corners have the same border radius (20px).
1 2 3 4 5
#round-rectangle{border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}
We'll make top border's and bottom border's width zero pixel, Use same border-radius (40px) for both top corners and for both the bottom corners (60px).
1 2 3 4 5 6 7 8
#adv-round-rectangle{border-width: 0px 12px 0px 12px;
border-style: double;
border-color: violet;
border-radius:40px 40px 60px 60px;
-moz-border-radius:40px 40px 60px 60px;
-webkit-border-radius:40px 40px 60px 60px;
}
Same border radius (20px) is assigned to the corners on the left, and same border radius (100px) is assigned to the right corners.
1 2 3 4 5
#bullet{border-radius: 20px 100px 100px 20px;
-moz-border-radius: 20px 100px 100px 20px;
-webkit-border-radius: 20px 100px 100px 20px;
}
Here Groove style border and different colors for each border is used and the code is same as above.
1 2 3 4 5 6 7 8
#adv-bullet{border-width: 12px;
border-style: groove;
border-color: red blue green black;
border-radius:20px 100px 100px 20px;
-moz-border-radius:20px 100px 100px 20px;
-webkit-border-radius:20px 100px 100px 20px;
}
Same border radius (120px) is assigned to the corners on the top-right and bottom-left, and a border radius (0px) is assigned to the top-left and bottom-right corners.
1 2 3 4 5
#leaf{border-radius: 0 120px 0 120px;
-moz-border-radius: 0 120px 0 120px;
-webkit-border-radius: 0 120px 0 120px;
}
Background color (orange) is used for the <div> . Solid style border is used here same color (blue) for the top and right border and same color (green) is used for bottom and left border.
1 2 3 4 5 6 7 8 9
#adv-leaf{background:orange;
border-width:4px 30px 4px 30px;
border-style: solid;
border-color: #56c6d9 #56c6d9 #fe2192 #fe2192;
border-radius:0 120px 0 120px;
-moz-border-radius:0 120px 0 120px;
-webkit-border-radius:0 120px 0 120px;
}
No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.