CSS - Border Block

Border Width

The border width property lets you set the thickness of an element's border. You can specify the width using pixels (px), ems (em), or other CSS units.

border-width: 2px;

It sets a 2-pixel wide border on all sides of the element. You can also set different widths for each side using border-top-width, border-right-width, border-bottom-width, and border-left-width. This gives you control over each side individually.

border-top-width: 1px; 
border-bottom-width: 3px;

It creates a thinner top border and a thicker bottom border.

Border Style

The border style property defines how the border looks. There are several styles to choose from, including solid, dashed, dotted, double, groove, ridge, inset, and outset.

border-style: dashed;

It creates a dashed border on all sides of the element. You can apply different styles to each side using the properties like border-top-style, border-right-style, border-bottom-style, and border-left-style. This allows you to have different styles around the element.

border-style: solid dashed dotted double;

Border Color

The border color property sets an element's border color. Specify colors using names (e.g., "red", "blue"), RGB values (e.g., rgb(255, 0, 0)), or hexadecimal codes (e.g., #ff0000).

border-color: blue;

This example would create a blue-colored edge around all sides of your selected item(s). Similar to width and style settings, you may assign unique hues per individual section via these commands: border-top-color, border-right-color, border-bottom-color, and border-left-color.

Using the border shorthand property

border: 2px solid blue;

This sets a 2-pixel wide, solid blue border on all sides of the element. You can also use the border shorthand to set different values for each side of the element:

Setting different borders for each side

border-top: 1px solid red;
border-right: 2px dotted green;
border-bottom: 3px dashed blue;
border-left: 4px double purple;

If you want to set the same border style and color but different widths for each side, you can use border-width, border-style, and border-color properties along with the shorthand:

Combining border properties and shorthand

border-width: 1px 2px 3px 4px;
border-style: solid;
border-color: blue;

Using the border shorthand property can simplify your CSS and make it easier to maintain. Just remember the order of values!

Creating rounded corners

To create rounded corners, use the border-radius property and specify a value in pixels, ems, or percentages:

border-radius: 10px;

This would round all corners of the element by 10 pixels. The higher the value, the more rounded the corners will appear.

Specifying different radii for each corner

You can set different border radii for each corner of an element. The border-radius property accepts up to four values, one for each corner in clockwise order (top-left, top-right, bottom-right, bottom-left):

border-radius: 5px 10px 15px 20px;

This would apply a 5-pixel radius to the top-left corner, a 10-pixel radius to the top-right, a 15-pixel radius to the bottom-right, and a 20-pixel radius to the bottom-left.

You can also use individual properties for each corner:

border-top-left-radius: 5px;
border-top-right-radius: 10px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 20px;

Using shorthand property

When you want the same radius for all corners or for pairs like top-left/bottom-right and top-right/bottom-left pairs, you can use shorthand version of border-radius:

/* Same radius for all corners */
border-radius: 10px;

/* Top-left/bottom-right and top-right/bottom-left pairs */
border-radius: 5px; 

By using border-radius, you can make your design more visually appealing. Experiment with different values until it looks good on your elements.

Using images as borders

To use an image as a border, you need to specify the image URL and how it should be sliced and repeated. The syntax for the border-image property is:

border-image: url('image.jpg') [slice] [repeat];

The url is the path to the image you want to use. The slice value defines how the image is divided into nine regions: four corners, four edges, and the middle. The repeat value specifies how the image should be repeated or stretched in each region.

Slicing and repeating the image

The slice value is a set of four numbers that represent the top, right, bottom, and left offsets from the edge of the image. These offsets define nine regions of the image.

border-image: url('border.png') 20 20 20 20;

The repeat value can be set to stretch, repeat, round, or space. It determines how the image is displayed in each region.

border-image: url('border.png') 20 20 20 20 round;

The round value repeats the image to fill space, adjusting size as needed to avoid partial tiles.

Adjusting size and position

You can control size and position using additional properties. The border-image-width property sets width while border-image-outset specifies how far it extends beyond element's border box.

border-image: url('border.png') 20 20 20 round;
border-image-width:10px;
border-image-outset:5px;

In this example, it’s set at a width of ten pixels wide extending five pixels beyond element's border box.

Default Box Model Behavior

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
}

The .box element will have a total width of 250px (200px content width + 20px left padding + 20px right padding + 5px left border + 5px right border) and a total height of 150px (100px content height + 20px top padding + 20px bottom padding + 5px top border + 5px bottom border). The margin is not included in these calculations.

To account for the border width in your layout calculations, you need to consider the additional space it occupies. One way to simplify this is by using the box-sizing property with a value of border-box.

Using Border-Box for Box Sizing

.box {
    box-sizing: border-box; 
    width: 200px; 
    height: 100px; 
    padding: 20px; 
    border: 5px solid black; 
    margin: 10px;
}

With box-sizing: border-box, the specified width and height values will include the content area, padding, and border. In this case, the .box element will have a rendered width of 200px and a height of 100px with the padding and border fitting inside those dimensions. The margin still adds to the total size.

By setting box-sizing: border-box on an element, you can more easily control its dimensions and create predictable layouts. This is especially helpful when working with responsive designs or when you need to set exact sizes for elements.

Applying Border-Box to All Elements

* {
   box-sizing: border-box;
}

It's common to apply box-sizing: border-box to all elements on a page using the universal selector (*) to make sizing more intuitive across your entire project. Keep in mind that when you change the 'box-sizing' property, it can affect the appearance of elements that rely on default 'content-box' behavior. Be sure to test your layout and adjust styles as needed.

Merging adjacent borders in table cells

To merge the borders of adjacent table cells, set the border-collapse property on the <table> element to collapse:

table {
  border-collapse: collapse;
}

With border-collapse: collapse, the borders of adjacent cells will be combined into a single border, eliminating any space between them. This creates a cleaner and more compact table layout.

Choosing between separate or collapsed borders

The border-collapse property accepts two values:

• separate: Adjacent table cells have separate borders with space between them.
• collapse: Adjacent table cells share a single border without any space between them.

To maintain separate borders for table cells, you can either omit the border-collapse property or set it to separate:

table {
  border-collapse: separate;
}

The separate value keeps individual cell borders with space between them.

Controlling the appearance of collapsed borders

When using border-collapse: collapse, you can control how merged borders look using properties like border-style, border-width, and border-color.

table {
  border-collapse: collapse;
}

td, th {
  border: 1px solid black;
}

In this example, each cell has a 1-pixel solid black border. The merged cell borders will form one continuous line.

You can also use the border-spacing property to control space between cell borders when using 'separate':

table {
  border-collapse: separate;
  border-spacing: 2px;
}

The '2px' value sets a distance of two pixels between each cell's outer edge.