CSS Borders
The CSS Border allows you to specify the border around HTML elements.
CSS Border Properties
The following table will list mostly used CSS border properties:
CSS Border Properties
Properties | Example & Syntax |
Border Color | border-color: blue; |
Border Style | border-style: solid; |
Border Width | border-width: 2px; |
Border Shorthand Property | border: 2px solid blue |
The border-color Property
The border-color
attribute allows you to define the color of the box’s border. You can individually change the color of the bottom, left, top and right border of HTML element.
There is shorthand property available to set the color of all four sides in the single attribute border-colour
. Shorthand property works in this order: top, right, bottom, and then left.
Here are different examples to set border color:
border-top-color: green;
border-right-color: blue;
border-bottom-color: black;
border-left-color: red;
border-color: green blue black red;
You can specify CSS borders colors in various formats such as RGB or hexadecimal.
The border-style Property
The border-style
attribute allows you to define the style of a box’s border such as solid or dotted. You can individually set the style of the bottom, left, top and right border of HTML element. There is shorthand property available to set the style of all four sides.
Border style property can have different values for different styles. Mostly used border styles are: dotted, solid, double, and dashed. Here are some examples to set border-style:
border-top-style: solid;
border-right-style: dotted;
border-bottom-style: double;
border-left-style: dashed;
border-style: solid dotted double dashed;
The border-width Property
The border-width
attribute allows you to set the width of CSS borders. You can set the width of each border (bottom, left, top and right) individually. There is shorthand property available to set the width of all four sides of an HTML element.
Here are some examples to set CSS border-width:
border-top-width: 2px;
border-right-width: 4px;
border-bottom-width: 2px;
border-left-width: 1px;
border-width: 2px 4px 2px 1px;
Border – Shorthand Property
CSS shorthand property allows you to set border style, width, and color in a single property. Therefore, you do not need to deal with a lot of border properties most of the time.
Here is an example to set CSS border style, width and color using shorthand property: border: 2px solid red;
Example of HTML Program having CSS border properties
<html>
<head>
</head>
<body>
<p style="border-top-style: dashed; border-left-style:solid; border-right-style: solid; border-bottom-style: dotted;">
This is the example of CSS Border Style property.
</p>
<p style="border-style:solid solid dashed dotted;">
This is the example of CSS Border Style Shorthand property. The border style defines with order: top, right, bottom and then left side of HTML element.
</p>
<p style="border-width:2px; border-style: dotted; border-color: megento;">
This is the example of CSS Border Width, Style and Color properties.
</p>
<p style="border-style:solid;">
This is the example of CSS Border Style Shorthand property. Please note that border style is the only mandatory thing to set border. Border width & color is optional and those values can be taken from browsers default.
</p>
<p style="border:2px solid blue;">
This is the example of CSS Border Shorthand property.
</p>
<p style="border:2px solid green; border-right-color: blue; border-bottom-style: dotted;">
You can override one border property with another or individual border property. Latest defined border property will override existing one.
</p>
</body>
</html>
Exercises & Assignments |
---|
No Content Found. |
Interview Questions & Answers |
---|
No Content Found. |