Scribd
Upload
153 views

CSS Border Properties

This document discusses CSS borders and their properties. It covers how to use CSS to customize borders, including their width, color, style, and individual sides. The key border properties covered are border-style, border-width, border-color, and border-radius. Shorthand properties like border are also discussed, which allow customizing multiple border properties at once. The document provides many code examples to illustrate how to apply various border styles and customize their appearance using CSS.

Uploaded by

Tam Chan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
153 views

CSS Border Properties

This document discusses CSS borders and their properties. It covers how to use CSS to customize borders, including their width, color, style, and individual sides. The key border properties covered are border-style, border-width, border-color, and border-radius. Shorthand properties like border are also discussed, which allow customizing multiple border properties at once. The document provides many code examples to illustrate how to apply various border styles and customize their appearance using CSS.

Uploaded by

Tam Chan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 50

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

You might also like