CSS - Border Block


Border Block Properties

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.

Example: Setting border width

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.

Example: Different border widths for each side

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.

Example: Applying a dashed border style

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.

Example: Shorthand for different border styles

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).

Example: Setting a border color to blue

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.

Border Shorthand Property

The border shorthand property lets you set an element's border width, style, and color in one line of CSS. This can make your code shorter and easier to read.

The syntax for the border shorthand is:

Example: Border Shorthand Syntax

border: [width] [style] [color];

The order of the values doesn't matter, but it's common to list them in this order.

Using the border shorthand property

Example: 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

Example: 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

Example: 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!

Border Radius

The border-radius property lets you round the corners of an element's border. This can soften the look of your design and create interesting shapes.

Creating rounded corners

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

Example: Rounded Corners

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):

Example: Different Radii for Each Corner

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:

Example: Individual Radii 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:

Example: Shorthand Property for 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.

Border Images

The border-image property lets you use an image as the border of an element. This can create designs that go beyond simple solid or dashed borders.

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:

Example: Border Image Syntax

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.

Example: Slicing the Border 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.

Example: Repeating the Border Image

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.

Example: Adjusting Size and Position of Border Image

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

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

Border and Box Model

Understanding how borders affect the box model is key to creating accurate layouts. By default, an element's specified width and height values only include its content area. Any padding, border, or margin added to the element will increase its total size.

Default Box Model Behavior

Example: 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

Example: 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

Example: 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.

Styling Individual Borders

Sometimes you may want to style each side of an element's border differently. CSS allows you to target and apply styles, colors, or widths to the top, right, bottom, and left borders individually.

To style a specific side of the border, use these individual border properties:

  • border-top: targets the top border
  • border-right: targets the right border
  • border-bottom: targets the bottom border
  • border-left: targets the left border

Each of these properties can be used to set the width, style, and color for that specific side of the border.

Example: Styling Different Border Sides

.box {
  border-top: 2px solid blue;
  border-right: 4px dashed green;
  border-bottom: 6px dotted red;
  border-left: 8px double purple;

In this code snippet, the .box element will have a 2-pixel solid blue top border, a 4-pixel dashed green right border, a 6-pixel dotted red bottom border, and an 8-pixel double purple left-border.

You can also use individual properties to set only width, style, or color of a specific side:

Example: Setting Individual Border Properties

.box {
  border-top-width: 2px;
  border-right-style: dashed;
  border-bottom-color: red;
  border-left: 8px double purple;

In this example, only top-border width, right-border style, and bottom-border color are set individually. The left-border is set using shorthand property defining its width, style, and color all at once.

Using these individual properties gives you control over the appearance on each side, which helps in creating designs or drawing attention towards layout parts.

When styling, remember that width affects the total size, impacting your layout. Use the box-sizing property with the value border-box to include borders within the specified dimensions. Also, remember that using shorthand can set the same value for all four sides, allowing you to override as needed while keeping the code concise and maintainable.

Border Collapse (for tables)

When working with tables in CSS, the border-collapse property lets you control how the borders of adjacent table cells are displayed. By default, table cells have separate borders, but you can merge them into a single border using the border-collapse property.

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:

Example: Merging Borders

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:

Example: Separate Borders

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.

Example: Collapsed Borders

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':

Example: Border Spacing

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

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