Basic Concepts, Tips, Tricks & Design Ideas
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!
Hemisphere
Round Rectangle
Bullet
Leaf
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.
Advanced Hemisphere
Advanced Round Rectangle
Advanced Bullet
Advanced Leaf
Borders can be applied in the following ways.
Border Syntax
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.
for width and radius. Colors can be assigned to the borders by using RGB
Color Code, Hex Color Code or by Color names.
Border Syntax
border-(sub-property): (top) (right) (bottom) (left);
sub-property
top
right
bottom
left
we can use width, color, style and radius as sub-properties of Border.
This value gets assigned to the top portion of the border
This value gets assigned to the right portion of the border
This value gets assigned to the bottom portion of the border
This value gets assigned to the left portion of the border
top
right
bottom
left
we can use width, color, style and radius as sub-properties of Border.
This value gets assigned to the top portion of the border
This value gets assigned to the right portion of the border
This value gets assigned to the bottom portion of the border
This value gets assigned to the left portion of the border
Here in sub-property we can use width, color, style and radius as sub-types of Border.
Four values need be to defined.
- The first value gets assigned to the top portion of the border.
- The second value gets assigned to Right portion of the border.
- The third value gets assigned to the Bottom portion of the border.
- The last value gets assigned to the left portion of the border.
for width and radius. Colors can be assigned to the borders by using RGB
Color Code, Hex Color Code or by Color names.
Border Color
Syntax : border-color: (top) (right) (bottom) (left);
Example: border-color: #85C226 #F7C200 #4493A0 #DF127B ;
Here the top border is green(#85C226) in color,
right border is yellow(#F7C200),
the bottom has blue(#4493A0)
and Left border is pink(#DF127B) in color.
right border is yellow(#F7C200),
the bottom has blue(#4493A0)
and Left border is pink(#DF127B) in color.
Border Styles Important
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;
Here the top border (green) has a solid style,
right (yellow) one has dotted,
bottom (blue) one has groove and
the left (pink) one has the double style.
right (yellow) one has dotted,
bottom (blue) one has groove and
the left (pink) one has the double style.
Border Width
Syntax : border-width: (top) (right) (bottom) (left); Example: border-width: 5px 10px 15px 20px;
Here Top (green) border's width is 5 pixel,
right (yellow) border is 10 pixel wide,
bottom (blue) is 15 pixel
and left (pink) is 20 pixel wide.
right (yellow) border is 10 pixel wide,
bottom (blue) is 15 pixel
and left (pink) is 20 pixel wide.
Border Radius
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.
For IE and Opera
For Mozilla Firefox
For Webkit Browsers
box-shadow:
-moz-box-shadow:
-webkit-box-shadow:
0px 30px 70px 20px;
0px 30px 70px 20px;
0px 30px 70px 20px;
No Border radius ( 0px ) has been applied on the top-left (green-pink) corner.
Border radius ( 30px ) has been applied on the top-right (green-yellow) corner.
Border radius ( 70px ) has been applied on the bottom-right (blue-yellow)corner.
Border radius ( 20px ) has been applied on the bottom-left (blue-pink) corner.
Border radius ( 30px ) has been applied on the top-right (green-yellow) corner.
Border radius ( 70px ) has been applied on the bottom-right (blue-yellow)corner.
Border radius ( 20px ) has been applied on the bottom-left (blue-pink) corner.
Now lets try making Hemisphere, Round Rectangle, Bullet and Leaf as shown at the top.
What we'll do here is create an empty <div> </div> inside your <body> </body> tags, then assign some width and height to it. We'll apply a thick border width to it so that the effect is visible clearly.
Stylesheet Code for <head> </head> tag
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>
! : Line 8 border:thick solid;
Border width (thick) wont work unless border type (solid) is also included in the code.
Please Note !The width and height as defined above will be same for all the <div> </div> tag's below. Just add the border-properties that I'm going to explain below.
Border width (thick) wont work unless border type (solid) is also included in the code.
Please Note !The width and height as defined above will be same for all the <div> </div> tag's below. Just add the border-properties that I'm going to explain below.
Code for <body> </body> tag
1 2 3 4 5 6 7
<body><div id=</body>example> </div>
Hemisphere
Use values of width, height and border as defined above. Only add these codes to your existing stylesheet or make a new one.
Hemisphere
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 ;
} Green
Yellow
Blue
Pink
=> Top Border
=> Right Border
=> Bottom Border
=> Left Border
Advanced Hemisphere
Now we'll add more effects to the border by applying different values for width and using different border style.
Adv-Hemisphere
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 Border Properties like border-width, border-style and border-color are added and rest of the codes for Advanced Hemisphere are same as Hemisphere above.
Round Rectangle
Here all the corners have the same border radius (20px).
Round
Rectangle
Rectangle
1 2 3 4 5
#round-rectangle{border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
} Green
Yellow
Blue
Pink
=> Top Border
=> Right Border
=> Bottom Border
=> Left Border
Advanced Round Rectangle
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).
Advanced Round Rectangle
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;
} Bullet
Same border radius (20px) is assigned to the corners on the left, and
same border radius (100px) is assigned to the right corners.
Bullet
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;
} Green
Yellow
Blue
Pink
=> Top Border
=> Right Border
=> Bottom Border
=> Left Border
Advanced Bullet
Here Groove style border and different colors for each border is used and the code is same as above.
Advanced Bullet
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;
} Leaf
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.
Leaf
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;
} Green
Yellow
Blue
Pink
=> Top Border
=> Right Border
=> Bottom Border
=> Left Border
Advanced Leaf
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.
Advanced Leaf
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;
} 
Join The Community