CSS Borders

Learn how to style element borders using CSS border properties

What are CSS Borders?

CSS borders create lines around elements, between the padding and margin. Borders can be styled with different colors, widths, and styles, and can have rounded corners.

Border Properties:

  • border - Shorthand for all border properties
  • border-width - Sets the border thickness
  • border-style - Sets the border style (solid, dashed, etc.)
  • border-color - Sets the border color
  • border-radius - Rounds the corners of an element's border
  • border-top, border-right, border-bottom, border-left - Individual side borders
  • border-image - Uses an image as the border
  • border-collapse - Controls table border behavior
  • border-spacing - Sets distance between table borders
Margin
Border
Padding
Content

Borders in Action

Example Code

/* Border Properties */
.element {
  /* Shorthand border property */
  border: 2px solid black;
  
  /* Individual border properties */
  border-width: 2px;
  border-style: solid;
  border-color: black;
  
  /* Border sides */
  border-top: 3px dashed red;
  border-right: 2px dotted blue;
  border-bottom: 4px double green;
  border-left: 1px groove #ccc;
  
  /* Border radius */
  border-radius: 10px;
  border-top-left-radius: 5px;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 25px;
}

/* Border styles */
.styles {
  border-style: solid;     /* Solid line */
  border-style: dashed;    /* Dashed line */
  border-style: dotted;    /* Dotted line */
  border-style: double;    /* Double line */
  border-style: groove;    /* 3D grooved */
  border-style: ridge;     /* 3D ridged */
  border-style: inset;     /* 3D inset */
  border-style: outset;    /* 3D outset */
  border-style: none;      /* No border */
  border-style: hidden;    /* Hidden border */
}

/* Advanced border examples */
.advanced {
  /* Multiple borders with box-shadow */
  box-shadow: 0 0 0 2px red, 0 0 0 4px blue;
  
  /* Outline (different from border) */
  outline: 3px solid orange;
  outline-offset: 5px;
}

Border Properties in Detail

Border Width

The border-width property sets the thickness of the border. It can be specified using various units.

border-width: 1px
border-width: 2px
border-width: 4px
border-width: 8px

Border Color

The border-color property sets the color of the border. It accepts all CSS color values.

border-color: red
border-color: blue
border-color: green
border-color: purple

Border Shorthand

The border shorthand property combines width, style, and color in one declaration.

/* border: width style color */
border: 2px solid #000;
border: medium dashed red;
border: thick double rgba(0, 0, 0, 0.5);

Border Styles

Common Border Styles

solid - A solid line
dashed - A dashed line
dotted - A dotted line
double - Two solid lines

3D Border Styles

groove - A 3D grooved effect
ridge - A 3D ridged effect
inset - A 3D inset effect
outset - A 3D outset effect

Special Border Values

none - No border (default)
border: none;
hidden - Hides the border (useful for tables)
border: hidden;

Border Radius

The border-radius property allows you to round the corners of an element. You can specify different radii for each corner, and use various units including pixels, percentages, and more.

Uniform Border Radius

.element {
border-radius: 10px;
}
All corners have 10px radius

Different Radii per Corner

.element {
border-radius: 10px 20px 30px 40px;
}
Top-left: 10px, Top-right: 20px, Bottom-right: 30px, Bottom-left: 40px

Creating Circles and Ovals

You can create perfect circles and ovals using border-radius with percentage values.

Circle
Oval
.circle {
border-radius: 50%;
width: 100px;
height: 100px;
}

.oval {
border-radius: 50%;
width: 200px;
height: 100px;
}

Individual Border Sides

CSS allows you to style each border side individually, giving you precise control over your element's appearance.

Individual Properties

.element {
border-top: 2px solid red;
border-right: 4px dashed blue;
border-bottom: 6px dotted green;
border-left: 8px double purple;
}
Each side has a different border style

Logical Properties

For internationalization and responsive design, use logical properties that adapt to text direction.

.element {
border-block-start: 2px solid red; /* top in horizontal, right in vertical */
border-block-end: 4px dashed blue; /* bottom in horizontal, left in vertical */
border-inline-start: 6px dotted green; /* left in horizontal, top in vertical */
border-inline-end: 8px double purple; /* right in horizontal, bottom in vertical */
}

Outline vs Border

Borders

  • Part of the element's box model
  • Affects layout and element dimensions
  • Can have rounded corners with border-radius
  • Can be applied to individual sides
  • Participates in box-sizing calculation
This is a border

Outlines

  • Drawn outside the element's border
  • Does not affect layout or dimensions
  • Cannot have rounded corners
  • Always drawn around all four sides
  • Often used for accessibility focus indicators
This has an outline

Border Image

The border-image property allows you to use an image as the border of an element, replacing the conventional border styles.

Border Image Properties

.element {
border: 10px solid transparent;
border-image: url(border.png) 30 round;
}

.element {
border: 15px solid transparent;
border-image: linear-gradient(45deg, red, blue) 1;
}

Border Image Slice

The border-image-slice property divides the border image into nine regions: four corners, four edges, and the middle.

/* Values 1-4 represent top, right, bottom, left */
border-image-slice: 30;
border-image-slice: 30 20;
border-image-slice: 30 20 10;
border-image-slice: 30 20 10 5;

Table Borders

Border Collapse

The border-collapse property determines whether table borders are collapsed into a single border or separated.

table {
border-collapse: collapse; /* Borders are merged */
/* OR */
border-collapse: separate; /* Borders are separated */
}

Border Spacing

The border-spacing property sets the distance between the borders of adjacent table cells (when border-collapse is separate).

table {
border-collapse: separate;
border-spacing: 10px 5px; /* horizontal vertical */
}

Practical Border Examples

Card Components

.card {
border: 1px solid #e0e0e0;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
padding: 20px;
}

Card Title

This is an example card with a subtle border.

Button Styles

.btn {
border: 2px solid #4CAF50;
border-radius: 4px;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
}

Custom Border Effects

.fancy-border {
position: relative;
padding: 20px;
}

.fancy-border::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 2px solid transparent;
border-radius: 8px;
background: linear-gradient(45deg, red, blue) border-box;
mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
}
This creates a gradient border effect using advanced CSS techniques.
< Previous (Padding)Next (Outline) >