Scribd
Upload
5 views9 pages

CSS Borders [Autosaved]

Uploaded by

muska.mia.22
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views9 pages

CSS Borders [Autosaved]

Uploaded by

muska.mia.22
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

CSS Borders

CSS Border Style

The border-style property specifies what kind of border to display.


The following values are allowed:
•dotted - Defines a dotted border
•dashed - Defines a dashed border
•solid - Defines a solid border
•double - Defines a double border
•groove - Defines a 3D grooved border. The effect depends on the border-color
value
•ridge - Defines a 3D ridged border. The effect depends on the border-color value
•inset - Defines a 3D inset border. The effect depends on the border-color value
•outset - Defines a 3D outset border. The effect depends on the border-color value
•none - Defines no border
•hidden - Defines a hidden border
Example
• .dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
CSS Border Width

The border-width property specifies the width of the four borders.


The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined
values: thin, medium, or thick:
• p.one {
border-style: solid;
border-width: 5px;
}

p.two {
border-style: solid;
border-width: medium;
}

p.three {
border-style: dotted;
border-width: 2px;
CSS Border Color

The border-color property is used to set the color of the four borders.
The color can be set by:
•name - specify a color name, like "red"
•HEX - specify a HEX value, like "#ff0000"
•RGB - specify a RGB value, like "rgb(255,0,0)"
•HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
•transparent
border-style: solid;
border-color: red;
}

p.two {
border-style: solid;
border-color: green;
}
Specific Side Colors

• The border-color property can have from one to four values (for the
top border, right border, bottom border, and the left border)
• border-style: solid;
border-color: red green blue yellow; /* red top,
green right, blue bottom and yellow left
CSS Border Sides

• From the examples on the previous pages, you have seen that it is possible to
specify a different border for each side.
• In CSS, there are also properties for specifying each of the borders (top, right,
bottom, and left):
• p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
CSS Border - Shorthand Property

•border-width
•border-style (required)
•border-color
p {
border: 5px solid red;
}
p {
border-left: 6px solid red;
}
CSS Rounded Borders

• p {
border: 2px solid red;
border-radius: 5px;
}
• Normal border
• Round border
• Rounder border
• Roundest border

You might also like