CSS Border Properties

CSS Border properties are used to decorate the border style, color, size of an element. the border properties in CSS specifying the width, style of the border area of the box, and color.
border properties applied on borders of a box-like shape, such as border-radius, box-shadow, and border-image.

the general form used which used to set the border around an element using CSS:

CSS Border

CSS Syntax border-style values

Value Discription
none its default border value means Define no border
initial initial value used for border style effect.
inherit inherit border-style value used for border style effect properties.
solid its Define as Solid Border, its value decorate the border style as solid
dotted the dotted value is used when you want to decorate the border style as dotted
dashed it’s defined as a dashed border, it also used to decorate the border style
double its define as double border style, use to decorate the border style of the element
groove Border properties value groove depends on the border-color value, it shows 3D effects inside the border. different color gives different effect inside the border.
ridge Ride border-style value also depends on border-color, 3D effects shows inside the border.
inset when you use inset value for border-style, the 3D effect depends on border-style color, different color gives different impact inside the border.
outset The outset border-style value shows the 3D effect outside the border, its border style effect depends on color value, 3D-effect results show on outside the border.
hidden its border style value used for the hidden border.

CSS Border-style Properties

First column Second column Third column
border border-color border-left
border-left-color border-left-style border-left-width
border-bottom border-bottom-color border-bottom-style
border-bottom-width border-radius border-right
border-right-color border-right-style border-right-width
border-width border-top-width border-top-style
border-top-color border-top border-style