CSS Border , Border Element, Uses of Border

0
729
css border

CSS Border

In this session, we will know that CSS border properties allow you to specify how the border of the box representing an element should look.

The CSS border properties are given below :

  • border-style
  • border-width
  • border-color
  • border-radius

border-style Property

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

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. The effect is generated according to border-color value.
ridge It defines a 3d ridged border. The effect is generated according to border-color value.
inset It defines a 3d inset border. The effect is generated according to border-color value.
outset It defines a 3d outset border. The effect is generated according to border-color value.

 

<p style="border-style:solid;">This is a solid border.</p>

You can individually change the style of the bottom, left, top, and right borders of an element.

Value Description
border-bottom-style changes bottom border style
border-top-style changes top border style
border-left-style changes left border style
border-right-style changes right border style
<p style="border-top-style:solid;border-bottom-style:dotted; border-left-style:groove; border-right-style:double;">
      This is a a border with four different styles.
</p>

border-width property

The border-width property is used to set the border’s width. It is set in px or pt or cm or it should be set to thin, medium or thick.

<p style="border-width:5px; border-style:dotted;">
      This is a dotted border whose width is 5px.
</p>

You can individually change the width of the bottom, top, left, and right borders of an element.

Value Description
border-bottom-width changes bottom border width
border-top-width changes top border width
border-left-width changes left border width
border-right-width changes right border width
<p style="border-top-width:5px;border-left-width: 2px;border-right-width:3px;">
      This is a border with four different width.
</p>

border-color Property

The border-color property allows you to change the color of the border surrounding an element.

<p style="border-color:red;"> This property to change the border color </p>

You can individually change the color of the bottom, left, top and right sides of border elements.

Value Description
border-bottom-color changes bottom border color
border-top-color changes top border color
border-left-color changes left border color
border-right-color changes right border color

 

border-radius Property

The border-radius property is used to add rounded borders to an element.

<p style="border: 2px solid red; border-radius: 12px;">
      This property is used to add rounded borders to an element
</p>

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here