Border and Outline in CSS

The border and outline are both CSS properties used to add a line or border around an HTML element. However, there are some key differences between the two properties:

1. The border property is used to add a border around the padding and content of an element, whereas the outline property is used to add a border around the element itself, outside the margin.

2. The border property affects the size and layout of an element, as it takes up space on the page and can change the position of other elements around it. The outline property, on the other hand, does not take up any space on the page and does not affect the layout of other elements.

3. The border property can have various styles, such as width, color, and style (solid, dotted, etc.), and can be set individually for each side of the element. The outline property, however, cannot have different styles for each side and applies the same style to all sides of the element.

4. The border property can also have rounded corners, which is not possible with the outline property.

In general, the border property is used to create a visible border around an element that affects the layout and appearance of the page, while the outline property is used to create a non-interfering border around an element that does not affect the layout of the page.

Border

Set the border of any html element. Border width of any element.

p{
    border: 2px solid red;
    border-top: 1px solid blue;
    border-right: 1px solid blue;
    border-left: 1px solid blue;
    border-bottom: 1px solid blue;
}

Border-Style

Set the border-style of any html element.

p{
    border-style: solid;
    border-style: dashed;
    border-style: inset;
    border-style: outset;
    border-style: none;
    border-top-style: dotted;
    border-right-style: double;
    border-bottom-style: ridge;
    border-left-style: hidden;
}

Border-Radius

Set the border-radius of any html element.

p{
    border-radius: 10px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

Border Shorthand Property

This allows the set the border width, border-style and border-color in one line.

p{
    border: 2px solid black;
}

Outline

All Border property may be use in Outline as well.

p{
    outline: 2px solid red;
    outline-top: 1px solid blue;
    outline-right: 1px solid blue;
    outline-left: 1px solid blue;
    outline-bottom: 1px solid blue;
}

Outline Shorthand Property

This allows the set the outline width, outline-style and outline-color in one line.

p{
    outline: 2px solid green;
}