The CSS border is a shorthand property used to set the border on an element. The CSS border properties allow you to specify the style, width, and color of HTML element's border. The CSS border properties are given below.
- border-style
- border-color
- border-width
- border-radius
CSS border-style:
It specifies whether a border should be solid, dashed line, double line, or one of the other possible values.
There are some border style values which are used with border-style property to define a border.
none : No border. (Equivalent of border-width:0;)
dotted : It is used to define a dotted border.
solid : Border is a single solid line.
dashed : It is used to define a dashed border.
double : Border is two solid lines.
groove: Border looks as though it is carved into the page.
ridge: It defines a 3d ridged border. effect is generated according to border-color value.
inset : Border makes the box look like it is embedded in the page.
outset : Border makes the box look like it is coming out of the canvas.
hidden : Same as none, except in terms of border-conflict resolution for table elements.
CSS border-color :
The border-color property allows you to change the color of the border surrounding an element.
CSS border-width :
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.
CSS border-radius :
This CSS property sets the rounded borders and provides the rounded corners around an element, tags, or div. It defines the radius of the corners of an element.
It is shorthand for border top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius. It gives the rounded shape to the corners of the border of an element. We can specify the border for all four corners of the box in a single declaration using the border-radius. The values of this property can be defined in percentage or length units.
Comments