CSS Borders and Outlines

Borders

Border is a boundry line drawn around the padding of the element. The CSS border properties allow us to define the style, width, and color of an elements border.

Border Style:- It is used to specify or set various types of border to display by the CSS border-style property. Possible values for border-style properties are dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden.

										    
											div {
												border-style: dotted;
											}
											
										

Border Width:- It is used to specify or set the width of the border area by the CSS border-width property. It can have one to four values, which includes the width for top border, right border, bottom border, and the left border.

										    
											p.class-1 {
												border-style: solid;
												border-width: 5px;
											}
											p.class-2 {
												border-style: solid;
												border-width: medium;
											}
											p.class-3 {
												border-style: solid;
												border-width: 10px 5px 7px 20px;
											}
											
										

Border Color:- It is used to specify or set the border color by the CSS border-color property. It can have one to four values, which includes the color for top border, right border, bottom border, and the left border.

										    
											p.class-1 {
												border-style: solid;
												border-color: green;
											}
											p.class-2 {
												border-style: solid;
												border-color: red green blue yellow;
											}
											
										

Border Shorthand Property:- We can specify all the border properties in one single property, known as shorthand property (i.e. border). The order of the background property values are:- border-width, border-style (required), border-color.

										    
											div {
												border: 5px solid green;
											}
											
										

Rounded Borders It is used to specify or set the rounded borders to an element by the CSS border-radius property.

										    
											p.class-1 {
												border: 3px solid green;
												border-radius: 10px;
											}
											
										

Outlines

An outline property in CSS is a line which is drawn outside the borders around any HTML elements, to make the element stand out.

Outline Style:- It is used to specify or set various types of outline styles to display by the CSS outline-style property. Possible values for outline-style properties are dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden.

										    
											p {
												outline-style: dashed;
											}
											
										

Outline Width:- It is used to specify or set the width of the outline by the CSS outline-width property. Possible values for outline-width properties are thin, medium, thick and a specific size (i.e. in px, pt, cm, em etc).

										    
											p.class-1 {
												border: 1px solid black;
												outline-style: solid;
												outline-width: thin;
											}
											p.class-2 {
												border: 1px solid black;
												outline-style: solid;
												outline-width: medium;
											}
											p.class-3 {
												border: 1px solid black;
												outline-style: solid;
												outline-width: thick;
											}
											p.class-4 {
												border: 1px solid black;
												outline-style: solid;
												outline-width: 10px;
											}
											
										

Outline Color:- It is used to specify or set the outline color by the CSS outline-color property. We can also set the outline-color to transparent and invert.

										    
											p {
												outline-style: solid;
												outline-color: green;
											}
											
										

Outline Shorthand Property:- We can specify all the outline properties in one single property, known as shorthand property (i.e. outline). The outline property can be specified as one, two, or three values i.e. outline-width, outline-style (required), outline-color in any order.

										    
											p {
												margin: 15px;
												border: 1px solid red;
												outline: 1px solid green;
												outline-offset: 10px;
											}
											
										

Outline Offset It is used to add the transparent space between an outline and the edge or border of an element by the CSS outline-offset property.

										    
											p.class-1 {
												border: 3px solid green;
												border-radius: 10px;
											}