The border property creates a border around an HTML element, such as a div, image, or text. You can customize the border by changing the border style, width, radius, and color for each side of the element. Borders help in improving the readability of the content as it provide separation of content and is also useful for highlighting important sections of the web page.
CSS Borders Example
You can try different ways to set the border in the below section and you can change the values as well.
CSS Border Interactive Example
Interactive example for CSS BordersBorder Width: pxBorder Radius: pxBorder Style: Solid Dashed Dotted Double Groove Ridge Inset Outset Border Color:
CSS Border Shorthand Property
You can use the shorthand CSS border property to specify the border width, style, and color.
Syntax
The syntax for the border shorthand property is as follows:
border: border-width border-style border-color | initial | inherit;
Example
In this example, we have used the CSS border property to set the border of a div and paragraph element.
<html><head><style>p { border: solid 4px grey; padding: 10px; } div{ border: darkred solid 5px; padding: 10px; } </style></head><body><p> Check the borders of paragraph !!!</p><div> Check the borders of div !!!</div></body></html></pre>Types of Border Properties
In CSS, we can style the following border properties:
- border-style: It specifies whether a border should be solid, dashed line, double line, or one of the other possible values.
- border-width: It specifies the width of a border.
- border-color: It specifies the color of a border.
CSS border-style Property
To specify the type of border style for an element, the border-style property is used. You can specify border style as solid, dashed, or dotted. Check out the output of the following example for all the types of border styles.
Example
In this example, we have used the border-style property to set the different border styles for each paragraph element.
<!DOCTYPE html><html><head><style>.none { border-style: none; } .hidden { border-style: hidden; } .dotted { border-style: dotted; } .dashed { border-style: dashed; } .solid { border-style: solid; } .double { border-style: double; } .groove { border-style: groove; } .ridge { border-style: ridge; } .inset { border-style: inset; } .outset { border-style: outset; } </style></head><body><h1>Border Style Property</h1><p class="none"> No border.</p><p class="hidden"> Hidden border.</p><p class="dotted"> Dotted border.</p><p class="dashed"> Dashed border.</p><p class="solid"> Solid border.</p><p class="double"> Double border.</p><p class="groove"> Groove border.</p><p class="ridge"> Ridge border.</p><p class="inset"> Inset border.</p><p class="outset"> Outset border.</p></body></html></pre>Border Style For Individual Sides
You can specify different border styles for each side of the element. To set the border-style property for the individual sides of the element, we use the following CSS properties:
- border-top-style: It sets the style of an element's top border.
- border-bottom-style: It sets the style of an element's bottom border.
- border-left-style: It sets the style of an element's left border.
- border-right-style: It sets the style of an element's right border.
Example
In this example, we have used the CSS border-style property for individual sides to set the different border styles for each side of a paragraph element.
<html><head><style>p { border-top-style: dotted; border-right-style: solid; border-bottom-style: dashed; border-left-style: double; padding: 2em; } </style></head><body><h2>Border Style Individual Side</h2><p>Different border styles on all sides.</p></body><html></pre>CSS border-width Property
The border-width is used to specify the thickness of a border around an element. It can have values like thin, medium, thick, or any length (in px, or em ). Let us look at an example of this.
Example
In this example, we have used the CSS border-width property to set the different border widths for each paragraph element.
<html><head><style>p.thin { border-style: solid; border-width: thin; padding: 10px; } p.medium { border-style: solid; border-width: medium; padding: 10px; } p.thick { border-style: solid; border-width: thick; padding: 10px; } p.length { border-style: solid; border-width: 10px; padding: 10px; } </style></head><body><p class="thin">Thin width.</p><p class="medium">Medium width.</p><p class="thick">Thick width.</p><p class="length">Border Width: 10px.</p></body></html></pre>Declare border-style property before declaring border-width property, else the border effect will not be seen.
Border Width For Individual Sides
You can specify different border widths for each side of an element. To set the border-width property for individual sides, use the following CSS properties:
- border-top-width: Sets the width of the top border.
- border-bottom-width: Sets the width of the bottom border.
- border-left-width: Sets the width of the left border.
- border-right-width: Sets the width of the right border.
Example
In this example, we have used the CSS border-width property for individual sides to set different border widths for each side of a paragraph element.
<html><head><style>p { border-style: solid; border-top-width: thin; border-right-width: thick; border-bottom-width: medium; border-left-width: 10px; padding: 2em; } </style></head><body><h2>Border Width Individual Sides</h2><p>Different border widths on all sides.</p></body></html></pre>CSS border-color Property
The border-color is used to set the color of the border. If no color is specified for the border, the default value is currentColor i.e. the foreground color.
Example
In this example, we have used the CSS border-color property to set the border colors of paragraph elements using the color name and hex value.
<html><head><style>.name { border-style: dashed; border-color: red; padding: 10px; } .hex { border-style: solid; border-color: #00ff00; padding: 10px; } </style></head><body><p class="name">Border Color: red</p><p class="hex">Border Color: #00ff00.</p></body></html></pre>Declare border-style property before declaring border-color property, else the border effect will not be seen.
Border Color For Individual Sides
You can specify different border colors for each side of an element. To set the border-color property for individual sides, use the following CSS properties:
- border-top-color: Sets the color of the top border.
- border-bottom-color: Sets the color of the bottom border.
- border-left-color: Sets the color of the left border.
- border-right-color: Sets the color of the right border.
Example
In this example, we have used the CSS border-color property for individual sides to set different border colors for each side of a paragraph element.
<html><head><style>p { border: solid 7px; border-top-color: red; border-right-color: #0000ff; border-bottom-color: rgb(100,123,111); border-left-color: rgba(50,123,111,0.4); padding: 10px; } </style></head><body><h2>Border Color Individual Sides</h2><p>Different border colors on all sides.</p></body></html></pre>Borders Individual Side Shorthand Property
To apply all the border properties, such as style, width, and color, to just one side of an element, we can make use of the shorthand border property for individual sides. The individual side border shorthand properties are as follows:
- border-top property: It is a shorthand property for setting the top border properties.
- border-bottom property: It is a shorthand property for setting the bottom border properties.
- border-left property: It is a shorthand property for setting the left border properties.
- border-right property: It is a shorthand property for setting the right border properties.
Syntax
The syntax for the individual side border shorthand properties is as follows:
border-top: 4px solid red;border-bottom: 2px dashed blue;border-left: 6px dotted green;border-right: 8px double yellow;
Example
In this example, we have used the border shorthand property for individual sides to set different borders on each side.
<html><head><style>p { border-top: red dashed thick; border-right: solid #0000ff medium; border-bottom: thin dotted rgb(100,123,111); border-left: rgba(50,123,111,0.4) 15px double; padding: 5px; } </style></head><body><p> Check out borders of paragraph !!!</p></body></html></pre>Override border Shorthand Property
You can override the border shorthand property by using any individual border property. See the following sample code to clarify this point:
div{border: 5px solid gray;border-bottom-width: 15px;}The above code will have a 5px thick, solid, and gray border on all the sides except for the bottom where the width will be 15px.
Example
Here is an example of overriding the border shorthand property:
<html><head><style>div { padding: 10px; border: 5px solid gray; border-bottom-width: 15px; } </style></head><body><div> Check the borders!!! </div></body></html></pre>Applying Borders to Inline Elements
Borders can be given to any inline element in a similar manner. The border's thickness will not have any effect on the line height of the element. If left and right borders are specified in an inline element, it will displace the text around the border. Here is an example of applying a border to an inline element.
Example
In this example, we have used the border property on span (inline element).
<html><head><style>span { border: 5px solid black; background-color: silver; } </style></head><body><p> Check the <span>inline elements</span> with borders and rest has no border. </p></body></html></pre>CSS border-image Property
To set images as borders for another element like div, span, body, paragraph, etc, you can use the border-image property. First you need to declare the border-style property before providing an image source, else no image will be displayed as the border.
Example
Here is an example of using the border-image property to set an image as the border of
<html><head><style>div{ background-color: #f0f0f0; border: 20px solid transparent; border-image: url(/css/images/border.png) 40; padding: 20px; } </style></head><body><div><p> This is an example of setting a border image using CSS </p></div></body></html></pre>CSS border-radius Property
CSS border-radius property is used to specify the roundness of border edges. The value for this property can be in length (px, em) or percentages. A border radius of 50% indicates a complete circle.
Example
In this example, we have created a rounded square and a circle using the border-radius property.
<html><head><style>div{ background-color: #00f9f9; height: 150px; width: 150px; text-align: center; } .round{ border-radius: 20px; } .fullRound{ border-radius: 50%; } </style></head><body><div class="round"> Round edged div </div><div class="fullRound"> Circular Div </div></body></html></pre>CSS Borders All Properties
All the properties related to the border are listed in the table below:
Property Description Example border A shorthand property for setting all the border properties in one declaration Try It border-color A shorthand property for setting border color of an element. Try It border-style A shorthand property for setting style (solid / dashed) of border of an element Try It border-width A shorthand property for setting border width of an element. Try It border-bottom A shorthand property for setting bottom border of an element. Try It border-bottom-color Sets the color of bottom border of an element. Try It border-bottom-width Sets the width of bottom border of an element. Try It border-bottom-style Sets the style of bottom border of an element. Try It border-left A shorthand property for setting left border of an element. Try It border-left-color Sets the color of left border of an element. Try It border-left-width Sets the width of left border of an element. Try It border-left-style Sets the style of left border of an element. Try It border-right A shorthand property for setting right border of an element. Try It border-right-color Sets the color of right border of an element. Try It border-right-width Sets the width of right border of an element. Try It border-right-style Sets the style of right border of an element. Try It border-top A shorthand property for setting top border of an element. Try It border-top-color Sets the color of top border of an element. Try It border-top-width Sets the width of top border of an element. Try It border-top-style Sets the style of top border of an element. Try It border-image A shorthand property for setting border image. Try It border-image-outset Sets the image outset i.e how much the border image area extends beyond the border box. Try It border-image-repeat This property determines whether the border image should be repeated, rounded, spaced or stretched. Try It border-image-source Sets the source/path of an image to be passed as a border to an element. Try It border-image-slice This property shows how to slice up an image in a border. Try It border-image-width Sets the width of the image to be set as a border. Try It