CSS Borders

http://www.free-powerpoint-templates-design.com
After this discussion you should be able to:

1 How to make borders using CSS

2 Learn the different CSS Border properties

3 Customize the width, colors, and individual sides of the borders.

4 Customize borders freely.

CSS Border Properties
 CSS Border Properties

It allows you to customize the width, color and style of a border.

CSS Border Style
 CSS Border Style

border-style
specifies what kind of border
to display.
 CSS Border Style

p.dotted {border-style: dotted;}

 CSS Border Style

p.dashed {border-style: dashed;}

 CSS Border Style

p.solid {border-style: solid;}

 CSS Border Style

p.double {border-style: double;}

 CSS Border Style

p.dashed {border-style: groove;}

 CSS Border Style

p.dashed {border-style: ridge;}

 CSS Border Style

p.dashed {border-style: inset;}

 CSS Border Style

p.dashed {border-style: outset;}

 CSS Border Style

p.dashed {border-style: none;}

p.dashed {border-style: hidden;}
CSS Border Width
 CSS Border Width
border-width
• specifies the width of the four borders.
• can be set in specific sizes i.e in:
px- pixels
pt- point
cm- centimeter
em- height of the font in nominal points or inches.
• there are also pre-defined values: thin, medium, thick
• this property can have four values: top border, right border,
bottom border, and the left border
p.one {
border-style: solid;
border-width: 5px;
}
p.seven {
border-style: solid;
border-width: 2px 10px 4px 20px
;
}
Note: Top, right, bottom, left
CSS Border Color
 CSS Border Color

border-color
• specifies the color of the borders
.
 CSS Border Color
Setting CSS Border Color through name

p.one {
border-style: solid;
border-color: red;
}
 CSS Border Color
Setting CSS Border Color through hex code

p.one {
border-style: solid;
border-color:#ffc0cb;
}
 CSS Border Color
Setting CSS Border Color through RGB value

p.one {
border-style: solid;
border-color:rgb(255,0,0);
}
 CSS Border Color
Setting CSS Border Color transparent

p.one {
border-style: solid;
border-color:transparent;
}
 CSS Border Color
Inherited border color

p.one {
border-style: solid;
color: red;
}
 CSS Border Color
Setting CSS Border Color multicolor

p.three {
border-style: solid;
border-color: red green blue yellow;
}

Note: top, right, bottom, left

CSS Border - Individual
Sides
 CSS Border - Individual Sides

border-*side*-style
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
 CSS Border - Individual Sides
Using 2 values

p{
border-style: dotted solid;
}
Note: Opposite
 CSS Border - Individual Sides
Using 4 values

p{
border-style: dotted solid dashed double;
}
CSS Border - Shorthand
Property
 CSS Border - Shorthand Property
border
• this property makes it possible to specify all individual
border properties using only one property.

border-width
border-style (required)
border-color
p{
border: solid purple 0.10cm;
}
 CSS Border - Shorthand Property
border-*side*
• specifies individual borders

border-left
border-bottom
border-top
border-right
p{
border-left: solid purple 0.10cm;
border-right: dashed green 0.10cm;
border-top: dotted yellow 0.10cm;
border-bottom: solid gold 0.10cm;
}
p{
border-left: solid purple 0.
10cm;
}
CSS Rounded Borders
 CSS Rounded Borders
border-radius
• used to make a border rounded
p.round3 {
border: 2em solid red;
border-radius: 12px;
}
THANK YOU!

By: COLUMBRES,
Tanya althea