Webzstore
The CSS 'border' property is a shorthand for setting the width, style, and color of an element's border at once. It simplifies border styling by combining these individual aspects into a single declaration, making it easier to read and write CSS for borders.
CSS 'border' Property Examples
See the Pen CSS 'border' Property by Webzstore (@webzstore) on CodePen.
The 'border' property streamlines the process of styling borders in CSS, allowing for a quick and concise definition of an element's border appearance. This makes it an essential tool for web developers and designers looking to efficiently apply border styles to enhance the UI of web pages.
Browser Support For 'border' Property
| Browser | Version | Released |
|---|---|---|
| Chrome | 1 | Dec 2008 |
| Edge | 12 | Jul 2015 |
| Firefox | 1 | Nov 2004 |
| Safari | 1 | Jun 2003 |
| Opera | 3.5 | Nov 1998 |
Source: MDN browser-compat-data 8.1.4, checked 3 October 2026. Prefixed support and implementations that were later removed are not counted, and some browsers list partial support or extra values. See the MDN reference for border for the full compatibility details, including mobile browsers.
CSS Syntax of the 'border' Property
border: width style color | initial | inherit ;
Usage of the 'border' Property
Use the 'border' property when you need to define or change the appearance of an element's border. It's useful for adding visual delineation or emphasis to elements like buttons, input fields, panels, etc. The property can apply uniformly to all sides of an element, making it a quick way to style borders without specifying each side individually.
Property Values of the 'border' Property
- Width: This specifies the thickness of the border. It can be a specific measurement (like 2px, 0.1em) or a keyword (thin, medium, thick).
- Style: This determines the border's line style (none, solid, dotted, dashed, double, groove, ridge, inset, outset).
- Color: Defines the color of the border. Accepts color names, hex codes, RGB(a), and HSL(a) values.
- Initial: Resets the 'border' to its default value, which is medium, none color, where color is the current color of the element.
- Inherit: Inherits the 'border' from the parent element.
