CSS Border Properties

 

CSS Border Properties

 

The CSS border is a shorthand property used to set the border on an element.

The CSS border properties are use to specify the style, color and size of the

 border of an element.

The CSS border properties are given below-

1. border-style

2. border-color

3. border-width

4. border-radius

5. border-image

 

 

CSS Border-Style

The Border style property is used to specify the border type which you want

 to display on the web page.

There are some border style values which are used with border-style property

 to define a border.

 

Value	Description
none	It doesn't define any border.
dotted	It is used to define a dotted border.
dashed	It is used to define a dashed border.
solid	It is used to define a solid border.
double	It defines two borders with the same border-width value.
groove	It defines a 3d grooved border. Effect is generated according to border-color value.
ridge	It defines a 3d ridged border. Effect is generated according to border-color value.
inset	It defines a 3d inset border. Effect is generated according to border-color value.
outset	It defines a 3d outset border. Effect is generated according to border-color value.

 

Ex 1. All Border Style Values in One Code.

 

CSS Code

 

 

 

Output

 

Ex 2- Set Different borders on each side of an element.

 

 CSS Code

 

Output

 

CSS Border-Image Style

                                                                       

The border-image property in CSS is used to specify the border of an

 image. This property creates a border using an image instead of a normal

 border. 

Ex - User Defined Border-image Property.

CSS Code

 

Output

CSS Border-width Style

The border-width property is used to set the border's width. It is set in pixels.

 You can also use the one of the three pre-defined values, thin, medium or

 thick to set the width of the border.

 

Border-Bottom-Width

The border-bottom-width property in CSS is used to set a specific width to

the bottom border of an element. The border-bottom-style or border-style

property is used for the element before using the border-bottom-width

property. 

CSS Code

Output

Border-Bottom-Color Property

The CSS border-bottom-color property is used to set the color of the bottom

 border of an element. It is mandatory to declare the border-style or border-

bottom-style property before using the border-bottom-color property always

 as there must exit a border first before we change its color.

 

CSS Code

 

 

Output

 

 

Border-Bottom-Style Property 

The border-bottom-style property in CSS is used to set the style of the bottom

 border of an element. 

 

CSS Code

Output

Border-Bottom Property

The border-bottom property in CSS is used to set all bottom border properties

 in one line. It is used to set the width, style, and color of the bottom border.

 

CSS Code

 

Output

 

CSS border-Color

 

The border-color property is used to add color to the border of an element.

 The border-color property will only work when the border-style property is

 defined first, which is used to set the borders. This property will not work

 alone. This can take one to four values for the top border, right border,

 bottom border, and left border respectively. If this property is not set then it

 inherits the color of the element.

 

CSS Code

 

Output

 

 

CSS Border-radius

 

The border-radius property in CSS is used to round the corners of the outer

border edges of an element. This property can contain one, two, three, or four

values. The border-radius property is used to set the border-radius. This

property is not applicable to the table elements when border-collapse is

collapsing.

CSS Code

 

Output