CSS - Borders

Ethan D. -

Border Properties

Border Style

The border-style property sets the style of the border around an element. It can take these values:

  • solid: Creates a solid line.
  • dotted: Creates a dotted line.
  • dashed: Creates a dashed line.
  • double: Creates a double line.
  • groove: Creates a 3D grooved effect.
  • ridge: Creates a 3D ridged effect.
  • inset: Creates a 3D inset effect.
  • outset: Creates a 3D outset effect.
  • none: Specifies no border.
  • hidden: Hides the border.

You can set individual styles for each side using the properties: border-top-style, border-right-style, border-bottom-style, and border-left-style.

Border Width

The border-width property sets the width of the border. It accepts these values:

  • thin
  • medium
  • thick

You can also specify an exact size using length units like pixels (e.g., 2px).

Set individual widths for each side with: border-top-width, border-right-width, border-bottom-width, and border-left-width.

Border Color

The 'border-color' property sets the color of the border. You can use different formats to specify colors:

  • Color names: e.g., 'red', 'blue', 'green'
  • RGB values: e.g., 'rgb(255, 0, 0)' for red
  • HEX values: e.g., '#ff0000' for red
  • HSL values: e.g., 'hsl(0, 100%, 50%)' for red

Set individual colors for each side with: 'Border-top-color', 'Border-right-color', 'Border-bottom-color', and 'Border-left-color'.

Border Shorthand

The shorthand property allows you to set width, style, and color in one declaration:

Example: Border Shorthand

.border {
    width style color;
}

Border Example

.border {
    border: 2px solid #000;
}

This sets a solid black border that is two pixels wide around an element. Using shorthand is convenient as it combines all properties into one statement.

Border Radius

The border-radius property lets you create rounded corners on an element's border. By setting a value for border-radius, you can control the curve of the corners.

To create rounded corners, use this syntax:

Example: Basic Rounded Corners

.rounded-border {
    border-radius: value;
}

The value can be in pixels (px), percentages (%), or ems.

Example: Rounded Corners with Pixels

.rounded-border {
    border-radius: 10px;
}

This will create rounded corners with a radius of 10 pixels on all four corners of the element.

You can also set different radii for each corner using these properties:

  • border-top-left-radius: Sets the radius for the top-left corner.
  • border-top-right-radius: Sets the radius for the top-right corner.
  • border-bottom-right-radius: Sets the radius for the bottom-right corner.
  • border-bottom-left-radius: Sets the radius for the bottom-left corner.

Example: Different Radii for Each Corner

.custom-rounded-border {
    border-top-left-radius: 5px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 20px;
}

Each corner will have a different radius as specified.

You can also use shorthand notation to set all four corners in one property:

Example: Shorthand Notation for Border Radius

.rounded-border {
    border-radius: 5px 10px 15px 20px;
}

The values are specified in clockwise order, starting from the top-left corner.

Border Images

The border-image property lets you use an image as the border around an element instead of a solid color. This property allows you to slice an image and use the slices to form the border.

To create a border image, specify the image source and how it should be sliced and repeated. Here's the basic syntax:

Example: Basic Syntax

.border-image {
    border-image: source slice repeat;
}
  • source: The URL or path to the image you want to use as the border.
  • slice: Specifies how to slice the image into nine regions: four corners, four edges, and the middle. The values are typically in pixels or percentages.
  • repeat: Defines how the middle sections of the image are repeated or scaled. It can be stretch, repeat, round, or space.

Example: Using the border-image Property

.image-border {
    border-image: url('border.png') 30 stretch;
}

In this example, the image border.png is used as a border. The image is sliced into 30-pixel wide regions, and the middle sections are stretched to fill in.

You can also set individual images for each side of an element using these properties:

  • border-top-image: Sets an image for top.
  • border-right-image: Sets an image for right.
  • border-bottom-image: Sets an image for bottom.
  • border-left-image: Sets an image for left.

Example: Setting Individual Borders

.custom-border-image {
    border-top-image: url('top-border.png') 20 repeat;
    border-right-image: url('right-border.png') 30 stretch;
    border-bottom-image: url('bottom-border.png') 25 round;
    border-left-image: url('left-border.png') 35 space;
}

This allows you to have different images for each side with varying slice and repeat values.

Using images can add visual interest and creativity to your elements' borders. Just make sure to use images that seamlessly tile or repeat for best results.

Border Collapse (for tables)

The border-collapse property controls how the borders of table cells behave. It determines if the borders of adjacent cells are separated or collapsed into a single border. This property is specific to table elements.

The border-collapse property accepts two values:

  1. separate (default): This value keeps the borders of adjacent cells separate. Each cell will have its own border, and there will be a space between the borders of neighboring cells.

  2. collapse: When set to collapse, the borders of adjacent cells are merged into a single border. The space between the cells is removed, and the borders are collapsed together.

Example: Difference between separate and collapse

<table class="separate-borders">
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table>

<table class="collapsed-borders">
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</<td> 
  </tr>
</table>
.separate-borders {
   border-collapse: separate;
}

.collapsed-borders {
   border-collapse: collapse;
}

table {
   border:1px solid black;
}

td {
   border:1px solid black;
   padding:5px;
}

In the first table with border-collapse: separate, each cell will have its own border, and there will be a space between them.

In the second table with border-collapse: collapse, the borders of adjacent cells will merge into one, removing any space between them for a more compact layout.

Using border-collapse: collapse can help create tables with cleaner appearances without gaps between cells. It's often used in many table designs for a polished look.

Remember that this property only applies to table elements like <table>, <th>, and <td>. It does not affect other elements on your page.