CSS Borders

Master CSS border properties to add, style, and customize borders around elements with colors, styles, widths, and rounded corners.

CSS borders are used to create visible boundaries around HTML elements. Borders can be styled with different widths, colors, and styles, and are essential for creating visual separation and emphasis.

Border Properties

CSS provides several properties to control borders:

border-width - Sets the width of the border
border-style - Sets the style of the border
border-color - Sets the color of the border
border-radius - Creates rounded corners

Border Style

The border-style property specifies what kind of border to display. This property must be set for the border to appear.

.border-styles {
  /* Solid border */
  border-style: solid;
  
  /* Dashed border */
  border-style: dashed;
  
  /* Dotted border */
  border-style: dotted;
  
  /* Double border */
  border-style: double;
  
  /* Groove, ridge, inset, outset */
  border-style: groove;
  border-style: ridge;
  border-style: inset;
  border-style: outset;
  
  /* No border */
  border-style: none;
  
  /* Hidden border */
  border-style: hidden;
}

Border Width

The border-width property sets the width of the border.

.border-widths {
  /* Keyword values */
  border-width: thin;
  border-width: medium;
  border-width: thick;
  
  /* Specific values */
  border-width: 1px;
  border-width: 5px;
  border-width: 0.5em;
  
  /* Different widths for each side */
  border-width: 2px 4px 2px 4px; /* top right bottom left */
}

Border Color

The border-color property sets the color of the border.

.border-colors {
  border-style: solid;
  border-width: 2px;
  
  /* Single color */
  border-color: red;
  
  /* Hexadecimal */
  border-color: #3498db;
  
  /* RGB */
  border-color: rgb(52, 152, 219);
  
  /* RGBA with transparency */
  border-color: rgba(52, 152, 219, 0.5);
  
  /* Different colors for each side */
  border-color: red blue green yellow; /* top right bottom left */
}

Border Shorthand

Combine border properties in a single declaration:

.box {
  /* width style color */
  border: 2px solid #333;
}

Individual Side Borders

You can set borders for individual sides:

.custom-borders {
  border-top: 3px solid red;
  border-right: 2px dashed blue;
  border-bottom: 4px double green;
  border-left: 1px dotted orange;
}

Border Radius

The border-radius property creates rounded corners:

.rounded {
  border: 2px solid #333;
  border-radius: 10px; /* All corners */
}

.different-corners {
  border-radius: 10px 20px 30px 40px; /* top-left top-right bottom-right bottom-left */
}

.circle {
  width: 100px;
  height: 100px;
  border: 2px solid #333;
  border-radius: 50%; /* Creates a perfect circle */
}

.elliptical {
  border-radius: 50px / 25px; /* horizontal / vertical */
}

Practical Examples

Card with Border

<!DOCTYPE html>
<html>
<head>
<style>
  .card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    margin: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .card:hover {
    border-color: #3498db;
  }
</style>
</head>
<body>
  <div class="card">
    <h3>Card Title</h3>
    <p>This card has a subtle border with rounded corners.</p>
  </div>
</body>
</html>

Button with Border

.button {
  border: 2px solid #3498db;
  border-radius: 5px;
  padding: 10px 20px;
  background-color: white;
  color: #3498db;
  cursor: pointer;
  transition: all 0.3s ease;
}

.button:hover {
  background-color: #3498db;
  color: white;
}

Decorative Border

.fancy-box {
  border-top: 5px solid #e74c3c;
  border-bottom: 1px solid #ddd;
  padding: 20px;
  background-color: #f8f9fa;
}

Border Images

CSS also supports border images for complex designs:

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

Best Practices

Border Best Practices

Always specify border-style for borders to appear
Use border-radius for modern, polished designs
Consider using box-shadow along with borders for depth
Keep border colors consistent with your design system
Use subtle borders (1px) for a clean, minimal look
Combine borders with hover effects for interactivity

Common Use Cases

Cards - Defining boundaries for content sections
Buttons - Creating outlined button styles
Form Inputs - Highlighting input fields
Dividers - Separating content sections
Focus States - Indicating active elements
Images - Adding frames to images

Border vs Outline

Note: outline is similar to border but doesn't affect layout:

.outline-example {
  outline: 2px solid blue;
  outline-offset: 5px; /* Space between outline and element */
}

Outlines are commonly used for accessibility (focus indicators) and don't affect the element's dimensions.

CSS borders are used to create visible boundaries around HTML elements. Borders can be styled with different widths, colors, and styles, and are essential for creating visual separation and emphasis.

Border Properties

CSS provides several properties to control borders:

border-width - Sets the width of the border
border-style - Sets the style of the border
border-color - Sets the color of the border
border-radius - Creates rounded corners

Border Style

The border-style property specifies what kind of border to display. This property must be set for the border to appear.

.border-styles {
  /* Solid border */
  border-style: solid;
  
  /* Dashed border */
  border-style: dashed;
  
  /* Dotted border */
  border-style: dotted;
  
  /* Double border */
  border-style: double;
  
  /* Groove, ridge, inset, outset */
  border-style: groove;
  border-style: ridge;
  border-style: inset;
  border-style: outset;
  
  /* No border */
  border-style: none;
  
  /* Hidden border */
  border-style: hidden;
}

Border Width

The border-width property sets the width of the border.

.border-widths {
  /* Keyword values */
  border-width: thin;
  border-width: medium;
  border-width: thick;
  
  /* Specific values */
  border-width: 1px;
  border-width: 5px;
  border-width: 0.5em;
  
  /* Different widths for each side */
  border-width: 2px 4px 2px 4px; /* top right bottom left */
}

Border Color

The border-color property sets the color of the border.

.border-colors {
  border-style: solid;
  border-width: 2px;
  
  /* Single color */
  border-color: red;
  
  /* Hexadecimal */
  border-color: #3498db;
  
  /* RGB */
  border-color: rgb(52, 152, 219);
  
  /* RGBA with transparency */
  border-color: rgba(52, 152, 219, 0.5);
  
  /* Different colors for each side */
  border-color: red blue green yellow; /* top right bottom left */
}

Border Shorthand

Combine border properties in a single declaration:

.box {
  /* width style color */
  border: 2px solid #333;
}

Individual Side Borders

You can set borders for individual sides:

.custom-borders {
  border-top: 3px solid red;
  border-right: 2px dashed blue;
  border-bottom: 4px double green;
  border-left: 1px dotted orange;
}

Border Radius

The border-radius property creates rounded corners:

.rounded {
  border: 2px solid #333;
  border-radius: 10px; /* All corners */
}

.different-corners {
  border-radius: 10px 20px 30px 40px; /* top-left top-right bottom-right bottom-left */
}

.circle {
  width: 100px;
  height: 100px;
  border: 2px solid #333;
  border-radius: 50%; /* Creates a perfect circle */
}

.elliptical {
  border-radius: 50px / 25px; /* horizontal / vertical */
}

Practical Examples

Card with Border

<!DOCTYPE html>
<html>
<head>
<style>
  .card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    margin: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .card:hover {
    border-color: #3498db;
  }
</style>
</head>
<body>
  <div class="card">
    <h3>Card Title</h3>
    <p>This card has a subtle border with rounded corners.</p>
  </div>
</body>
</html>

Button with Border

.button {
  border: 2px solid #3498db;
  border-radius: 5px;
  padding: 10px 20px;
  background-color: white;
  color: #3498db;
  cursor: pointer;
  transition: all 0.3s ease;
}

.button:hover {
  background-color: #3498db;
  color: white;
}

Decorative Border

.fancy-box {
  border-top: 5px solid #e74c3c;
  border-bottom: 1px solid #ddd;
  padding: 20px;
  background-color: #f8f9fa;
}

Border Images

CSS also supports border images for complex designs:

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

Best Practices

Border Best Practices

Always specify border-style for borders to appear
Use border-radius for modern, polished designs
Consider using box-shadow along with borders for depth
Keep border colors consistent with your design system
Use subtle borders (1px) for a clean, minimal look
Combine borders with hover effects for interactivity

Common Use Cases

Cards - Defining boundaries for content sections
Buttons - Creating outlined button styles
Form Inputs - Highlighting input fields
Dividers - Separating content sections
Focus States - Indicating active elements
Images - Adding frames to images

Border vs Outline

Note: outline is similar to border but doesn't affect layout:

.outline-example {
  outline: 2px solid blue;
  outline-offset: 5px; /* Space between outline and element */
}

Outlines are commonly used for accessibility (focus indicators) and don't affect the element's dimensions.

CoderrShyam

CSS Borders

Border Properties

Border Style

Border Width

Border Color

Border Shorthand

Individual Side Borders

Border Radius

Practical Examples

Card with Border

Button with Border

Decorative Border

Border Images

Best Practices

Common Use Cases

Border vs Outline

On this page

CoderrShyam

CSS Borders

Border Properties

Border Style

Border Width

Border Color

Border Shorthand

Individual Side Borders

Border Radius

Practical Examples

Card with Border

Button with Border

Decorative Border

Border Images

Best Practices

Common Use Cases

Border vs Outline

On this page