Border in CSS
Border in CSS
Border in CSS, the border property is used to define the appearance of an element’s border. A border can be applied to various HTML elements, such as divs, paragraphs, tables, and more. The border property can be broken down into several sub-properties that control different aspects of the border, such as color, style, and width.
Basic Syntax:
selector {
border: [border-width] [border-style] [border-color];
}
border-width: Specifies the width of the border. It can take values likethin,medium,thick, or specific measurements like pixels (px), em units (em), or percentages.border-style: Defines the style of the border, such assolid,dotted,dashed,double, etc.border-color: Sets the color of the border. It can be specified using color names, hexadecimal codes, RGB values, or other color representations.
Border Width:
The border-width property determines the thickness of the border. You can set it to a specific value, such as 2px or use predefined values like thin, medium, or thick. Additionally, you can set different widths for each side of an element using the properties border-top-width, border-right-width, border-bottom-width, and border-left-width.
/* Example of setting border width */
div {
border-width: 2px; /* Applies the same width to all sides */
}
/* Example of setting different border widths for each side */
div {
border-top-width: 1px;
border-right-width: 2px;
border-bottom-width: 3px;
border-left-width: 4px;
}
Border Style:
The border-style property defines the style of the border, determining how it appears visually. Common values include solid, dotted, dashed, double, groove, ridge, inset, and outset. Each style produces a distinct visual effect.
/* Example of setting border style */
div {
border-style: dotted; /* Applies a dotted border style */
}
Border Color:
The border-color property sets the color of the border. You can use color names, hexadecimal codes, RGB values, or other color representations to define the border color. Similar to border-width, you can set different colors for each side using border-top-color, border-right-color, border-bottom-color, and border-left-color
/* Example of setting border color */
div {
border-color: #3498db; /* Applies a border color using hexadecimal code */
}
/* Example of setting different border colors for each side */
div {
border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: yellow;
}
Shorthand border Property:
To streamline the application of borders, CSS provides a shorthand border property that allows you to set border-width, border-style, and border-color in a single declaration.
/* Example of using shorthand border property */
div {
border: 2px solid #e74c3c; /* Sets border width, style, and color in one line */
}
Rounded Corners:
Border in CSS also provides properties for creating rounded corners on elements. The border-radius property determines the radius of the element’s corners. It can take a single value for all corners or separate values for each corner (border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius).
In this example, the div element will have a 1-pixel wide solid black border around it. The border property is shorthand for specifying the border-style, border-width, and border-color properties in one declaration.
The border property can be customized further by using different values for each of the border-style, border-width, and border-color properties separately. Here is an example:
div {
border-style: dotted;
border-width: 2px;
border-color: red;
}
/* Example of setting border-radius for all corners */
div {
border-radius: 10px; /* Applies a 10px radius to all corners */
}
/* Example of setting different border-radius values for each corner */
div {
border-top-left-radius: 5px;
border-top-right-radius: 10px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 20px;
}
In this example, the div element will have a dotted 2-pixel wide red border around it.
Some other common border styles that can be used with the border-style property include solid, dashed, double, and groove. The border-width property can be specified in pixels, ems, or other units, and the border-color property can be specified using named colors, hex codes, or RGB values.