Page 76 - CSS

• border-image-source: The path to the image to be used
• border-image-slice: Specifies the offset that is used to divide the image into nine regions
(four corners, four edges and a middle)
• border-image-repeat: Specifies how the images for the sides and the middle of the border
image are scaled

Consider the following example wheras border.png is a image of 90x90 pixels:

border-image: url("border.png") 30 stretch;

The image will be split into nine regions with 30x30 pixels. The edges will be used as the corners
of the border while the side will be used in between. If the element is higher / wider than 30px this
part of the image will be stretched. The middle part of the image defaults to be transparent.

border-[left|right|top|bottom]

The border-[left|right|top|bottom] property is used to add a border to a specific side of an
element.

For example if you wanted to add a border to the left side of an element, you could do:

#element {
border-left: 1px solid black;
}

border-collapse

The border-collapse property applies only to tables (and elements displayed as display: table or
inline-table) and sets whether the table borders are collapsed into a single border or detached as
in standard HTML.

table {
border-collapse: separate; /* default */
border-spacing: 2px; /* Only works if border-collapse is separate */
}

Also see Tables - border-collapse documentation entry

Multiple Borders

Using outline:

.div1{
border: 3px solid black;
outline: 6px solid blue;
width: 100px;
height: 100px;
margin: 20px;
}

https://riptutorial.com/ 54