Loading

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: 

  1. its width, or thickness
  2. its style, or appearance
  3. 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

ValueDescription
noneNo border
hiddenA hidden border, same as ‘none’ except for table elements
dottedA series of dots
dashesA series of short dashes
solidA single solid line
doubleTwo parallel lines with a small gap between them
grooveA border that appears to be carved into the page
ridgeA border that appears to be slightly raised above the page
insetA border that appears embedded into the page
outsetA 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

 

FEATURESBORDEROUTLINE
DefinitionDefines the width, style, and color of the border around an element.Draws a line around an element, outside the border edge.
Affects LayoutYes, it takes up space and affects the element's layout.No, it does not take up space or affect the layout.
PositionPositioned within the element's box model.Positioned outside the element's border.
Individual Side ControlYes, can control each side separately (e.g., border-top).No, applies to all sides equally.
Offset PropertyNoYes, outline-offset to control distance from the border.
Propertiesborder-width, border-style, border-color, border-radius, border-top, border-right, border-bottom, border-leftoutline-width, outline-style, outline-color, outline-offset
Shorthand Propertyborderoutline