In CSS, borders are used to create visual boundaries around HTML elements, enhancing the structure and design of web pages. A border surrounds the content and padding areas of an element, fitting into the CSS box model.
en.wikipedia.org
Key Properties for Styling Borders:
border-width: Specifies the thickness of the border.
Values can be set using specific units (e.g., px, em) or predefined keywords:
thin
medium (default)
thick
border-style: Defines the pattern or design of the border.
Possible values include:
none: No border (default).
solid: A single solid line.
dotted: A series of round dots.
dashed: A series of square-ended dashes.
double: Two solid lines.
groove: A carved effect.
ridge: An embossed effect.
inset: An inset effect.
outset: An outset effect.
hidden: Same as none, but used in table elements.
border-color: Sets the color of the border.
Accepts color names, HEX, RGB, RGBA, HSL, or HSLA values.
If not specified, the border will use the element’s color property.
Shorthand Property:
The border property is a shorthand method to set the width, style, and color simultaneously. The order of these values is flexible.
Example:
/* Using individual properties */
element {
border-width: 2px;
border-style: solid;
border-color: #000;
}
/* Using the shorthand property */
element {
border: 2px solid #000;
}
Applying Borders to Specific Sides:
CSS allows targeting borders on specific sides of an element:
border-top
border-right
border-bottom
border-left
Example:
element {
border-top: 2px dashed red;
border-right: 1px solid blue;
border-bottom: 3px double green;
border-left: 4px groove black;
}
Rounded Corners:
To create rounded corners, use the border-radius property:
Example:
element {
border: 2px solid #000;
border-radius: 10px;
}
This will render a border with corners rounded to a 10-pixel radius.
Note: The border-style property must be defined for the border to be visible. If omitted or set to none, the border will not appear, regardless of the border-width or border-color values.
Leave a comment