CSS Border - 33 Properties and its Values (Reference)
Css
6
The CSS border properties define the style of the four borders of an element. Border properties are used to draw a border around an element.
Border properties:
border
A shorthand property for setting all the border properties in one declaration.
border: border-width border-style border-color;
border: initial;
border: inherit;
border-color
Sets the color of the four borders.
border-color: color;
border-color: transparent;
border-color: initial;
border-color: inherit;
// all_color
// top_color left_right_color
// top_bottom_color left_right_color bottom_color
// top_color bottom_color left_color right_color
border-style
Sets the style of the four borders.
border-style : none;
border-style : hidden;
border-style : dotted
border-style : dashed;
border-style : solid;
border-style : double;
border-style : groove;
border-style : ridge;
border-style : inset;
border-style : outset;
border-style : initial;
border-style : inherit;
// top right bottom left
// top right bottom
// top_bottom left_right
// all_border
border-width
Sets the width of the four borders.
border-width : medium;
border-width : thin;
border-width : thick;
border-width : length;
border-width : initial;
border-width : inherit;
// thin medium thick 10px
top border is thin
right border is medium
bottom border is thick
left border is 10px
// thin medium thick
top border is thin
right and left borders are medium
bottom border is thick
// thin medium
top and bottom borders are thin
right and left borders are medium
// thin
all four borders are thin
border-radius
A shorthand property for the four border-*-radius properties.
border-radius: 1-4 length;
border-radius: % / 1-4 length;
border-radius: %;
border-radius: initial;
border-radius: inherit;
// top-left top-right bottom-right bottom-left
// top-left top-right bottom-right
// top-left_and_bottom-right top-right_bottom-left
// all_corner
border-spacing
Sets the distance between the borders of adjacent cells If one value provided, it represents horizontal/vertical spacing. If two value provided, it represents horizontal and vertical spacing.
border-spacing: length;
border-spacing: initial;
border-spacing: inherit;
border-collapse
Sets whether table borders should collapse into a single border or be separated.
border-collapse: separate;
border-collapse: collapse;
border-collapse: initial;
border-collapse: inherit;
border-top
A shorthand property for setting all the border-top properties in one declaration.
// border-top: width style color;
border-top: initial;
border-top: inherit;
border-top-color
Sets the color of the top border.
border-top-color: color;
border-top-color: transparent;
border-top-color: initial;
border-top-color: inherit;
border-top-style
Sets the style of the top border.
border-top-style : none;
border-top-style : hidden;
border-top-style : dotted
border-top-style : dashed;
border-top-style : solid;
border-top-style : double;
border-top-style : groove;
border-top-style : ridge;
border-top-style : inset;
border-top-style : outset;
border-top-style : initial;
border-top-style : inherit;
border-top-width
Sets the width of the top border.
border-top-width: medium;
border-top-width: thin;
border-top-width: thick;
border-top-width: length;
border-top-width: initial;
border-top-width: inherit;
border-top-left-radius
Defines the radius of the border of the top-left corner.
border-top-left-radius : length;
border-top-left-radius : % [length;
border-top-left-radius : %];
border-top-left-radius : initial;
border-top-left-radius : inherit;
border-top-right-radius
Defines the radius of the border of the top-right corner.
border-top-right-radius : length;
border-top-right-radius : % [length;
border-top-right-radius : %];
border-top-right-radius : initial;
border-top-right-radius : inherit;
border-bottom
A shorthand property for setting all the border-bottom properties in one declaration.
//border-bottom: width style color;
border-bottom: initial;
border-bottom: inherit;
border-bottom-color
Sets the color of the bottom border.
border-bottom-color: color;
border-bottom-color: transparent;
border-bottom-color: initial;
border-bottom-color: inherit;
border-bottom-style
Sets the style of the bottom border.
border-bottom-style : none;
border-bottom-style : hidden;
border-bottom-style : dotted
border-bottom-style : dashed;
border-bottom-style : solid;
border-bottom-style : double;
border-bottom-style : groove;
border-bottom-style : ridge;
border-bottom-style : inset;
border-bottom-style : outset;
border-bottom-style : initial;
border-bottom-style : inherit;
border-bottom-width
Sets the width of the bottom border.
border-bottom-width: medium;
border-bottom-width: thin;
border-bottom-width: thick;
border-bottom-width: length;
border-bottom-width: initial;
border-bottom-width: inherit;
border-bottom-left-radius
Defines the radius of the border of the bottom-left corner.
border-bottom-left-radius : length;
border-bottom-left-radius : % [length;
border-bottom-left-radius : %];
border-bottom-left-radius : initial;
border-bottom-left-radius : inherit;
border-bottom-right-radius
Defines the radius of the border of the bottom-right corner.
border-bottom-right-radius : length;
border-bottom-right-radius : % [length;
border-bottom-right-radius : %];
border-bottom-right-radius : initial;
border-bottom-right-radius : inherit;
border-left
A shorthand property for setting all the border-left properties in one declaration.
// border-left: width style color;
border-left: initial;
border-left: inherit;
border-left-color
Sets the color of the left border.
border-left-color: color;
border-left-color: transparent;
border-left-color: initial;
border-left-color: inherit;
border-left-style
Sets the style of the left border.
border-left-style : none;
border-left-style : hidden;
border-left-style : dotted
border-left-style : dashed;
border-left-style : solid;
border-left-style : double;
border-left-style : groove;
border-left-style : ridge;
border-left-style : inset;
border-left-style : outset;
border-left-style : initial;
border-left-style : inherit;
border-left-width
Sets the width of the left border.
border-left-width: medium;
border-left-width: thin;
border-left-width: thick;
border-left-width: length;
border-left-width: initial;
border-left-width: inherit;
border-right
A shorthand property for setting all the border-right properties in one declaration.
// border-right: width style color;
border-right: initial;
border-right: inherit;
border-right-color
Sets the color of the right border.
border-right-color: color;
border-right-color: transparent;
border-right-color: initial;
border-right-color: inherit;
border-right-style
Sets the style of the right border.
border-right-style : none;
border-right-style : hidden;
border-right-style : dotted
border-right-style : dashed;
border-right-style : solid;
border-right-style : double;
border-right-style : groove;
border-right-style : ridge;
border-right-style : inset;
border-right-style : outset;
border-right-style : initial;
border-right-style : inherit;
border-right-width
Sets the width of the right border.
border-right-width: medium;
border-right-width: thin;
border-right-width: thick;
border-right-width: length;
border-right-width: initial;
border-right-width: inherit;
border-image
A shorthand property for all the border-image-* properties.
border-image: source slice width outset repeat;
border-image: initial;
border-image: inherit;
border-image-outset
Specifies the amount by which the border image area extends beyond the border box.
border-image-outset: length;
border-image-outset: number;
border-image-outset: initial;
border-image-outset: inherit;
border-image-repeat
Specifies whether the border image should be repeated, rounded or stretched.
border-image-repeat: stretch;
border-image-repeat: repeat;
border-image-repeat: round;
border-image-repeat: initial;
border-image-repeat: inherit;
border-image-slice
Specifies how to slice the border image.
border-image-slice: number;
border-image-slice: %;
border-image-slice: fill;
border-image-slice: initial;
border-image-slice: inherit;
border-image-source
Specifies the path to the image to be used as a border.
border-image-source: none;
border-image-source: image;
border-image-source: initial;
border-image-source: inherit;
border-image-width
Specifies the width of the border image.
border-image-width: number;
border-image-width: %;
border-image-width: auto;
border-image-width: initial;
border-image-width: inherit;
Prev
2
3
7
0
7