CSS - Borders

Previous
Quiz
Next

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 Borders

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>

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>

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:

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>

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>
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:

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>

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>
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:

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>

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:

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>

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>

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>

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(/https/www.tutorialspoint.com/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>

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>

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
border-color A shorthand property for setting border color of an element.
border-style A shorthand property for setting style (solid / dashed) of border of an element
border-width A shorthand property for setting border width of an element.
border-bottom A shorthand property for setting bottom border of an element.
border-bottom-color Sets the color of bottom border of an element.
border-bottom-width Sets the width of bottom border of an element.
border-bottom-style Sets the style of bottom border of an element.
border-left A shorthand property for setting left border of an element.
border-left-color Sets the color of left border of an element.
border-left-width Sets the width of left border of an element.
border-left-style Sets the style of left border of an element.
border-right A shorthand property for setting right border of an element.
border-right-color Sets the color of right border of an element.
border-right-width Sets the width of right border of an element.
border-right-style Sets the style of right border of an element.
border-top A shorthand property for setting top border of an element.
border-top-color Sets the color of top border of an element.
border-top-width Sets the width of top border of an element.
border-top-style Sets the style of top border of an element.
border-image A shorthand property for setting border image.
border-image-outset Sets the image outset i.e how much the border image area extends beyond the border box.
border-image-repeat This property determines whether the border image should be repeated, rounded, spaced or stretched.
border-image-source Sets the source/path of an image to be passed as a border to an element.
border-image-slice This property shows how to slice up an image in a border.
border-image-width Sets the width of the image to be set as a border.
Print Page
Previous
Next
Advertisements