Scribd
Upload
8 views

CSS - 3 - Border

The document discusses CSS border properties and how to specify the style, width, and color of element borders including using individual border properties or shorthand properties to set multiple border properties at once.

Uploaded by

baderrrr7777777
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
8 views

CSS - 3 - Border

The document discusses CSS border properties and how to specify the style, width, and color of element borders including using individual border properties or shorthand properties to set multiple border properties at once.

Uploaded by

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

CSS Border Properties

The CSS border properties allow you to specify the style, width, and color of an
element's border.

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

The border-style property can have from one to four values (for the top border, right
border, bottom border, and the left border).

Example
p.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;}

Result:

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border. The effect depends on the border-color value.


A ridge border. The effect depends on the border-color value.

An inset border. The effect depends on the border-color value.

An outset border. The effect depends on the border-color value.

No border.

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)

The border-width property can have from one to four values (for the top border, right
border, bottom border, and the left border).

5px border-width
Example
p.one {
border-style: solid;
border-width: 5px;
}

p.three {
border-style: solid;
border-width: 2px 10px 4px 20px;
}

Border Color
The border-color property is used to set the color of the four borders.

The border-color property can have from one to four values (for the top border, right
border, bottom border, and the left border).

Red border
Example
p.one {
border-style: solid;
border-color: red;
}

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

Border - Individual Sides


From the examples above you have seen that it is possible to specify a different border
for each side.

In CSS, there is also properties for specifying each of the borders (top, right, bottom, and
left):

Different Border Styles


Example
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}

If the border-style property has four values:

 border-style: dotted solid double dashed;


o top border is dotted
o right border is solid
o bottom border is double
o left border is dashed

Border - Shorthand Property


To shorten the code, specify all the border properties in one property.

The border property is a shorthand property for the following individual border properties:

 border-width
 border-style (required)
 border-color

Example
p {
border: 5px solid red;
}

Some text

You can also specify all the individual border properties for just one side:
Left Border
p {
border-left: 6px solid red;
background-color: lightgrey;
}

Some text

Bottom Border
p {
border-bottom: 6px solid red;
background-color: lightgrey;
}

Some text

You might also like