Border-Overview
Borders
- The CSS border is used to set the border on an element.
- Border property allows setting Style, color and width of the border.
Every border has three parts:
- its width, or thickness
- its style, or appearance
- It's color
Border property and its individual components:
border-width:
- This property sets the width of the border.
- Units to specify border widths are in pixels (px), ems (em), or percentages (%).
- You can set the width for all sides or individually for each side (top, right, bottom, left).
Syntax:
/* Setting border width for all sides */
border-width: 2px;
/* Setting border width for individual sides */
border-top-width: 5px;
border-right-width: 1px;
border-style:
- This property defines the style of the border, such as solid, dashed, dotted, double, etc.
Syntax:
/* Setting border style for all sides */
border-style: solid;
/* Setting border style for individual sides */
border-top-style: dashed;
border-right-style: dotted;
border-bottom-style: double;
border-left-style: solid;
border-color:
- This property sets the color of the border. You can specify the color using named colors, hexadecimal color codes, RGB values, or other color representations.
Syntax:
/* Setting border color for all sides */
border-color: red;
/* Setting border color for individual sides */
border-top-color: #00FF00; /* Green */
border-right-color: rgb(255, 0, 0); /* Red */
border-bottom-color: blue;
border-left-color: rgba(0, 0, 255, 0.5); /* Semi-transparent blue */
Values to pass border-style
Value | Description |
---|---|
none | No border |
hidden | A hidden border, same as ‘none’ except for table elements |
dotted | A series of dots |
dashes | A series of short dashes |
solid | A single solid line |
double | Two parallel lines with a small gap between them |
groove | A border that appears to be carved into the page |
ridge | A border that appears to be slightly raised above the page |
inset | A border that appears embedded into the page |
outset | A border that appears slightly raised out of the page |
Example:
The following example shows border-style property with different values:
<!DOCTYPE html>
<html>
<body>
<p style="border-style: none;">No border.</p>
<p style="border-style: hidden;">Hidden border.</p>
<p style="border-style: dotted;">Dotted border.</p>
<p style="border-style: dashed;">Dashed border.</p>
<p style="border-style: solid;">Solid border.</p>
<p style="border-style: double;">Double border.</p>
<p style="border-style: groove;">Groove border.</p>
<p style="border-style: ridge;">Ridge border.</p>
<p style="border-style: inset;">Inset border.</p>
<p style="border-style: outset;">Outset border.</p>
<p style="border-style: none dashed solid dotted;">A mixed border.</p>
</body>
<html>
Output:
Difference Between Border and Outline
FEATURES | BORDER | OUTLINE |
---|---|---|
Definition | Defines the width, style, and color of the border around an element. | Draws a line around an element, outside the border edge. |
Affects Layout | Yes, it takes up space and affects the element's layout. | No, it does not take up space or affect the layout. |
Position | Positioned within the element's box model. | Positioned outside the element's border. |
Individual Side Control | Yes, can control each side separately (e.g., border-top ). | No, applies to all sides equally. |
Offset Property | No | Yes, outline-offset to control distance from the border. |
Properties | border-width , border-style , border-color , border-radius , border-top , border-right , border-bottom , border-left | outline-width , outline-style , outline-color , outline-offset |
Shorthand Property | border | outline |