Home
Templates
Blog
Custom Services
Free Resources
Contact

 WEBSITE TEMPLATES       FLASH WEBSITES       CMS TEMPLATES     


Flash Tutorials
& Resources Dreamweaver
Tutorials Fireworks &
Illustrator Tutorials
 Photoshop
Tutorials Web Design
Tutorials & Resources CSS
Tutorials CorelDraw
Tutorials
You are here : : Home > Free Resources > CSS Tutorials > CSS Borders Tutorial   

CSS Borders Tutorial

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!

css borders

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);

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


Here in sub-property we can use width, color, style and radius as sub-types of Border.
Four values need be to defined.

  1. The first value gets assigned to the top portion of the border.
  2. The second value gets assigned to Right portion of the border.
  3. The third value gets assigned to the Bottom portion of the border.
  4. The last value gets assigned to the left portion of the border.

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.

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.

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.

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.

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.
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.

Code for <body> </body> tag 

1
2
3
4
5
6
7

<body>

<div id=example>

</div>
 
</body>

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
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;

 }

Now building a website is as easy as 1-2-3!

Please Like, Tweet, Share or Comment on this page if you found this tutorial/resource useful!

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.


Looking for high-quality Responsive Website Design? Choose from over 2000 templates!

Featured Template
Template # 51921
Type: Magento
Price: $179
View
Buy