CSS Introduction | CSS Box Model | Border

The border property lets you set the style of the border that surrounds the content and padding areas.

CSS border properties are as follows.

border-style Property

With the border-style property, you can set borders in various shapes.

• dotted: Sets the border as a dotted line.
• dashed: Sets the border as a slightly longer dashed line.
• solid: Sets the border as a solid line.
• double: Sets the border as a double solid line.
• groove: Sets the border as a three-dimensional grooved line, affected by the border-color value.
• ridge: Sets the border as a three-dimensional ridged line, affected by the border-color value.
• inset: Sets the border as a three-dimensional inset line, affected by the border-color value.
• outset: Sets the border as a three-dimensional outset line, affected by the border-color value.
• none: Removes the border.
• hidden: The border exists but is not displayed.

<style>
    .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;}
    .none {border-style: none;}
    .hidden {border-style: hidden;}
    .mix {border-style: solid dashed dotted double;}
</style>

border-width Property

The border-width property sets the thickness of the border. You can set the thickness directly using CSS size units such as px, em, and cm. You can also use predefined keywords such as thin, medium, and thick.

<style>
    .dottedA { border-style: dotted; border-width: 2px; }
    .dottedB { border-style: dotted; border-width: 5px; }
    .dashedA { border-style: dashed; border-width: thin; }
    .dashedB { border-style: dashed; border-width: thick; }
    .doubleA { border-style: double; border-width: 5px; }
    .doubleB { border-style: double; border-width: thick; }
    .mix { border-style: solid; border-width: 1px 2px 10px thick; }
</style>

border-color Property

The border-color property sets the color of the border. In addition to regular color property values, you can use transparent to represent a transparent border. If border-color is not set, the element inherits its color property value.

<style>
    .red { border-color: red; }
    .green { border-color: rgb(0,255,0); }
    .blue { border-color: #0000FF; }
    .mix { border-color: red green blue maroon; }
    .color { color: teal; }
</style>

Setting Each Border Side Separately

With CSS, you can apply styles separately to the top, right, bottom, and left borders.

<style>
    .mixA {
        border-top-style: dotted;
        border-right-style: double;
        border-bottom-style: dotted;
        border-left-style: double;
    }
    .mixB { border-style: dotted double; }
</style>

When four border-style values are provided, they are set in the order top, right, bottom, left. Example: border-style: dotted dashed solid double;

This has the same meaning as the following four lines.

border-style-top: dotted;
border-style-right: dashed;
border-style-bottom: solid;
border-style-left: double;

When three border-style values are provided, they are set in the order top, right and left, bottom. Example: border-style: dotted dashed solid;

This has the same meaning as the following four lines.

border-style-top: dotted;
border-style-right: dashed;
border-style-bottom: solid;
border-style-left: dashed;

When two border-style values are provided, they are set in the order top and bottom, right and left. Example: border-style: dotted dashed;

This has the same meaning as the following four lines.

border-style-top: dotted;
border-style-right: dashed;
border-style-bottom: dotted;
border-style-left: dashed;

When one border-style value is provided, all border styles are set to the same value. Example: border-style: dotted;

This has the same meaning as the following four lines.

border-style-top: dotted;
border-style-right: dotted;
border-style-bottom: dotted;
border-style-left: dotted;

Border Shorthand

You can set styles using all border properties in one line.

<style>
    .good { border: 3px solid teal; }
    .wrong { border: 5px teal; }
</style>

To set the border property, the border-style property must be set first.

CSS3 Borders

In CSS3, you can make border corners rounded or use images for borders.

The border properties newly added in CSS3 are as follows.

Browser Support for CSS3 border Properties

Major browser versions that support CSS3 border properties are as follows. The versions where each browser first supported the feature with a vendor prefix are also shown.

border-radius Property

In CSS3, you can set the border-radius property on any HTML element to make its corners rounded.

<style>
    #p_01 { height: 150px; width: 200px; border-radius: 25px; }
    #div_01 { height: 150px; width: 200px; border-radius: 25px; }
    #p_02 {
        background: url(/examples/images/img_background_good.png);
        background-position: left top;
        background-repeat: repeat;
        border-radius: 25px;
    }
</style>

The border-radius property is actually shorthand for setting the following four properties in one line. Therefore, you can set styles for each corner separately by using these properties.

1. border-top-left-radius
2. border-top-right-radius
3. border-bottom-right-radius
4. border-bottom-left-radius

The following example sets rounded corners with different sizes for each corner.

<style>
    #p_01 {
        border-top-left-radius: 20px;
        border-top-right-radius: 40px;
        border-bottom-right-radius: 60px;
        border-bottom-left-radius: 80px;
    }
</style>

You can also use the border-radius property to set rounded corners of different sizes.

<style>
    #p_01 { border-radius: 20px 40px 60px 80px; }
    #p_02 { border-radius: 20px 40px 60px; }
    #p_03 { border-radius: 20px 40px; }
    #p_04 { border-radius: 20px; }
</style>

When four border-radius values are provided, they are set in the order top-left, top-right, bottom-right, bottom-left. Example: border-radius: 20px 40px 60px 80px; This has the same meaning as the following four lines.

border-top-left-radius: 20px;
border-top-right-radius: 40px;
border-bottom-right-radius: 60px;
border-bottom-left-radius: 80px;

When three border-radius values are provided, they are set in the order top-left, top-right and bottom-left, bottom-right. Example: border-radius: 20px 40px 60px; This has the same meaning as the following four lines.

border-top-left-radius: 20px;
border-top-right-radius: 40px;
border-bottom-right-radius: 60px;
border-bottom-left-radius: 40px;

When two border-radius values are provided, they are set in the order top-left and bottom-right, top-right and bottom-left. Example: border-radius: 20px 40px; This has the same meaning as the following four lines.

border-top-left-radius: 20px;
border-top-right-radius: 40px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 40px;

When one border-radius value is provided, all border-radius values are set to the same value. Example: border-radius: 20px; This has the same meaning as the following four lines.

border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;

border-image Property

In CSS3, you can use an image for the border surrounding an element.

The border-image property works in the following order.

1. Decide which image to use as the border.
2. Decide which parts of the image to slice.
3. Decide whether the middle parts of the border should be repeated or stretched.

First, decide which image to use as the border.

The border-image property divides the configured image into 9 pieces like a grid.

After that, it decides whether the areas corresponding to top, right, bottom, and left should be repeated or stretched.

The following example uses the round value to repeat the middle part of the border.

<style>
    #p_01 {
        border: solid 20px transparent;
        -webkit-border-image: url(/examples/images/img_css3_pattern.png) 34 round;
        -moz-border-image: url(/examples/images/img_css3_pattern.png) 34 round;
        -o-border-image: url(/examples/images/img_css3_pattern.png) 34 round;
        border-image: url(/examples/images/img_css3_pattern.png) 34 round;
    }
</style>

To set the border-image property, the border property must be set first.

The following example uses the stretch value to stretch the middle part of the border.

<style>
    #p_01 {
        border: solid 20px transparent;
        -webkit-border-image: url(/examples/images/img_css3_pattern.png) 34% stretch;
        -moz-border-image: url(/examples/images/img_css3_pattern.png) 34% stretch;
        -o-border-image: url(/examples/images/img_css3_pattern.png) 34% stretch;
        border-image: url(/examples/images/img_css3_pattern.png) 34% stretch;
    }
</style>

As shown in the example above, the default unit for arguments passed to the border-image property is %.

You can also set different handling methods for vertical borders and horizontal borders.

<style>
    #p_01 {
        border: solid 20px transparent;
        -webkit-border-image: url(/examples/images/img_css3_pattern.png) 34 round stretch;
        -moz-border-image: url(/examples/images/img_css3_pattern.png) 34 round stretch;
        -o-border-image: url(/examples/images/img_css3_pattern.png) 34 round stretch;
        border-image: url(/examples/images/img_css3_pattern.png) 34 round stretch;
    }
</style>

The border-image property is actually shorthand for setting the following five properties in one line.

1. border-image-source
2. border-image-slice
3. border-image-width
4. border-image-outset
5. border-image-repeat