Scribd
Upload
4 views

CSS Borders [Autosaved]

Uploaded by

muska.mia.22
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

CSS Borders [Autosaved]

Uploaded by

muska.mia.22
Copyright
© © All Rights Reserved
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