The border is a shorthand property in CSS, which is used to add a border on an element. It allows us to specify the border of the box. It sets the width, style, and color of the border. This CSS property includes the following border properties:
- border-width: The border-width property is used to set the border's width. We can also use the pre-defined values that are thin, medium, and thick to set the width of the border. It sets the thickness of the border. Its default value is medium . This property cannot be used alone. It is always used with other border properties like "border-style" property to set the border first; otherwise, it will not work. The width of the border can be different for every individual side. It can be done by using the border-bottom-width, border-top-width, border-right-width , and border-left-width .
- border-style: This property specifies the style of the border. It defines whether the border is solid, dotted, dashed, double, groove, and one of the other possible values. Without setting this property, i.e., without setting the border style, none of the other border properties will work. The border will be invisible without specifying the border-style . This is because the default value of this CSS property is none . Similar to border-width , the style of the border can be different for each individual side. It can be done using the properties border-bottom-style, border-top-style, border-right-style , and border-left-style .
- border-color: It allows us to change the color of the border. We can set the color by using the color name, RGB value, or hex value. Similar to the border-width and border-style , we can change the color of the border individually, i.e., we can change the color of the bottom, top, left, and right side of the border of an element. It can be done by using the properties border-bottom-color, border-top-color, border-right-color , and border-left-color . The border-color property cannot be used alone. It must be used with other border properties like "border-style" property to set the border; otherwise, it will not work.
border vs. outline
Although borders and outlines share similarities, there exist distinctions between the two:
- When utilizing an outline, customization of width, style, and color for each side of an element is not possible, unlike borders where uniform values can be applied to all sides.
- Borders contribute to the element's overall dimensions, whereas outlines do not. This implies that regardless of the thickness of an outline, it will not impact the dimensions of the element.
Let's examine an illustration to grasp the concept of the border attribute.
Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
p{
border: 4px blue;
font-size: 20px;
color: red;
text-align: center;
}
p.none {border-style: none;}
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.hidden {border-style: hidden;}
</style>
</head>
<body>
<p class="none">No border.</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="hidden">A hidden border.</p>
</body>
</html>
Output
Now, here is a different instance where we are utilizing both the outline and border attributes.
Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid red;
outline: 3px solid blue;
border-radius: 12px;
font-size: 20px;
font-weight: bold;
margin: 30px;
padding: 30px;
outline-offset: 0.5em;
}
</style>
</head>
<body>
<div>
<h3> Welcome to the C# Tutorial </h3>
In this div element, we are using both outline and border properties. The outline is represented by blue color and border is by red color.
</div>
</body>
</html>
Output