1 CREATIVE DESIGN & MULTIMEDIA INSTITUTE
CSS Border Properties
The CSS border properties allow you to specify the style, width, and color
of an element's border.
Syntax :
border : [border-width] [border-style] [border-color]
1. Border-width :
The border-width property sets the width of an element's four borders.
Syntax:
border-width : medium | thin | thick | length;
If the border-width property has four values:
border-width: thin medium thick 10px;
o top border is thin
o right border is medium
o bottom border is thick
o left border is 10px
If the border-width property has three values:
border-width: thin medium thick;
o top border is thin
o right and left borders are medium
o bottom border is thick
If the border-width property has two values:
border-width: thin medium;
o top and bottom borders are thin
o right and left borders are medium
CREATIVE DESIGN & MULTIMEDIA INSTITUTE
2 CREATIVE DESIGN & MULTIMEDIA INSTITUTE
If the border-style property has one values:
border-width: thin;
- all four borders are thin
border-top-width: 10px;
border-bottom-width: 10px;
border-left-width: 10px;
border-right-width: 10px;
2. Border-style :
The border-style property sets the style of an element's four borders.
Syntax :
border-style: none | hidden | dotted | dashed | solid | double
groove | ridge | inset | outset;
If the border-style property has four values:
border-style: dotted solid double dashed;
o top border is dotted
o right border is solid
o bottom border is double
o left border is dashed
If the border-style property has three values:
border-style: dotted solid double;
o top border is dotted
o right and left borders are solid
o bottom border is double
If the border-style property has two values:
border-style: dotted solid;
o top and bottom borders are dotted
o right and left borders are solid
CREATIVE DESIGN & MULTIMEDIA INSTITUTE
3 CREATIVE DESIGN & MULTIMEDIA INSTITUTE
If the border-style property has one values:
border-style: dotted;
- all four borders are dotted
border-top-style: dotted;
border-bottom- style: dashed;
border-left- style: double;
border-right- style: solid;
3. border-color :
The border-color property is used to set the color of the four borders.
Syntax:
border-color: color | transparent;
If the border-color property has four values:
border-color: red green blue pink;
o top border is red
o right border is green
o bottom border is blue
o left border is pink
If the border-color property has three values:
border-color: red green blue;
o top border is red
o right and left borders are green
o bottom border is blue
If the border-color property has two values:
border-color: red green;
o top and bottom borders are red
o right and left borders are green
CREATIVE DESIGN & MULTIMEDIA INSTITUTE
4 CREATIVE DESIGN & MULTIMEDIA INSTITUTE
If the border-color property has one value:
border-color: red;
- all four borders are red
border-top-color: red;
border-bottom- color: green;
border-left- color: blue;
border-right- color: cyan;
CSS Border Radius Properties
The border-radius property defines the radius of the element’s corners.
Syntax:
border-radius: length | % ;
If the border-radius property has four values:
border-radius: 5px 10px 20px 15px;
o 5px – top left corner
o 10px – top right corner
o 20px – bottom right corner
o 15px – bottom left corner
If the border-radius property has three values:
border-radius: 10px 20px 15px;
o 10px – top left corner
o 20px – top right and bottom left corner
o 15px – bottom right corner
If the border-radius property has two values:
border-radius: 10px 20px;
o 10px – top left and bottom right corner
o 20px – top right and bottom left corner
CREATIVE DESIGN & MULTIMEDIA INSTITUTE
5 CREATIVE DESIGN & MULTIMEDIA INSTITUTE
If the border-radius property has one value:
border-radius: 20px;
- all four corners
CSS Outline Properties
The CSS outline properties is a line that is drawn around elements,outside
the borders,to make the element stand out.
Syntax :
outline : [outline-width] [outline-style] [outline-color] ;
1. outline-width :
The outline-width property specifies the width of an outline.
Syntax:
outline-width : medium | thin | thick | length;
2. outline-style :
The outline-style property specifies the style of an outline.
Syntax:
outline-style: none | hidden | dotted | dashed | solid | double
groove | ridge | inset | outset;
3. outline-color :
The outline-color property specifies the color of an outline.
Syntax:
outline-color: color ;
outline-offset :
The outline-offset property adds space between the outline and border
of an element.
Syntax:
outline-offset: length ;
CREATIVE DESIGN & MULTIMEDIA INSTITUTE
