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:
-
The
border
property is used to add a border around the padding and content of an element, whereas theoutline
property is used to add a border around the element itself, outside the margin. -
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. Theoutline
property, on the other hand, does not take up any space on the page and does not affect the layout of other elements. -
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. Theoutline
property, however, cannot have different styles for each side and applies the same style to all sides of the element. -
The
border
property can also have rounded corners, which is not possible with theoutline
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;
}