Border Page

This is what it looks like in CSS:

border:size style color;

💡

You must specifiy the border style, otherwise nothing will be displayed.

Border Styles

dotted

dashed

solid

double

groove

ridge

inset

outset

mixed

Border Radius

Think of 5 descriptive words for the rouding of edges on a box? Bevel? Rounding? Corners? Well, in CSS it's called border-radius and nobody knows why.

This is how border-radius works on a single line:

Top Left
Top Right
Bottom Right
Bottom Left

border-radius: 10px 10px 40px 40px;

border-radius: 50%;

Common Issue with Nested Borders

If you need to nest borders, they will not match properly and you must use a formula to ensure they match.

The Solution

You need to add a calc value to solve this problem, this is the formula:

/*Save this and never think of it again.*/
.outer {
    width: var(--border_block_outer);
    height: var(--border_block_outer);
    border-radius: 
    calc(var(--border_block_radius)
        + (var(--border_block_outer) 
        - var(--border_block_inner)) / 2);
}

.inner {
    width: var(--border_block_inner);
    height: var(--border_block_inner);
    border-radius: var(--border_block_radius);
}

Can you tell which version has the better nested borders?