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
