CSS border

Jakob Jenkov
Last update: 2014-08-11

As explained in the text about the CSS box model, an HTML element can have a border around it. Borders can be solid, dashed, three-dimensional, have rounded corners, and you can even use images in your borders.

Borders are specified using the various CSS border properties. This text covers these border properties.

CSS Border Properties

Borders are styled using these border CSS properties:

  • border

  • border-width
  • border-style
  • border-color

  • border-top
  • border-right
  • border-bottom
  • border-left

  • border-top-width
  • border-top-style
  • border-top-color
  • border-right-width
  • border-right-style
  • border-right-color
  • border-bottom-width
  • border-bottom-style
  • border-bottom-color
  • border-left-width
  • border-left-style
  • border-left-color

  • border-radius
  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-left-radius
  • border-bottom-right-radius

These CSS properties for border styling will be explained in the following sections.

border

The border CSS property sets the border around an HTML element, meaning all four borders (top, right, bottom and left). The border CSS property value consists of three parts:

  • border width
  • border style
  • border color

Each of these parts are specified when setting the border property, separated by a space. Here is an example: 

#theDiv {
    border : 1px solid #000000;
}

The first value is 1px which is the border width. This value sets the border around the HTML element to a width of 1 pixel. Border widths are specified using any of the valid CSS units.

The second value is solid which is the border style. This value sets the border to be solid, meaning a simple line (not dashed, no 3D effect etc.). There are many more styles you can choose from. These will be covered later.

The third value is #000000 which is the border color. This value sets the border color to black. Border colors are specified using the CSS colors formats.

border-width

The border-width CSS property can be used to set the width of the border around an HTML element. Values for the border-width CSS property are specified using any of the valid CSS units. Here is an example: 

#theDiv {
    border-width: 2px;
}

This example CSS rule sets the border width to 2 pixels for the HTML element selected by the CSS rule.

border-style

The border-style CSS property can be used to set the border style of a border around an HTML element. The valid values you can use for the border-style CSS property are:

  • solid
  • dotted
  • dashed
  • double
  • groove
  • ridge
  • inset
  • outset
  • none
  • hidden

The none and hidden values have the same effect. It shows no border.

Here are some visual examples of how these border styles look when rendered: 

    solid

    dotted

    dashed

    double

    groove

    ridge

    inset

    outset

Note that the border width is set to 2px for the first three examples, and 6px for the last. Some of the border styles require a border width bigger than 2px before you can really see their effect.

border-color

The border-color CSS property sets the color of the border. The border-color CSS property can accept any valid CSS color. Here is a border-color example: 

#theParagraph {
    border-width: 2px;
    border-style: solid;
    border-color: #ff00ff;
}

This is how that example will look when rendered:

border-color example.

border-top, border-right, border-bottom, border-left

The border-top, border-right, border-bottom and border-left properties work the same way as the border property, except these CSS properties only configure one part of the border (the top, left, bottom or right border). These properties are configured in the same way. Here is an example: 

#theDiv {
    border-left: 1px solid #000000;
}

This example sets the left border of the selected HTML element to a 1 pixel wide, solid, black border. Here is how that looks when rendered in the browser:

An element with border-left: 1px solid #000000

Additional Border CSS Properties

The last CSS properties for border (border-top-width, border-top-style, border-top-color etc.) work the same way as the border-width, border-style and border-color properties, except these last border properties only set on part of the border (top, right, bottom or left).

Here is an example: 

#theDiv {
    border-top-width: 2px;
    border-top-style: dashed;
    border-top-color: #cccccc;
}

This example sets the top border of the selected element to a 4 pixel wide, dashed, gray border. Here is how that looks when rendered in the browser:

An element with border-top-width: 2px; border-top-style: dashed; border-top-color: #cccccc;

border-radius

The border-radius CSS property is new in CSS 3.0 . The border-radius CSS property is used to create rounded corners of borders on HTML elements. Before border-radius rounded corners on HTML elements was only possible using tables and images, and it was both heavy in HTML and heavy to download for the browser. Luckily the border-radius CSS property saves us from that misery.

Here is a border-radius example: 

#theDiv {
    border        : 1px solid #cccccc;
    border-radius : 10px;
    padding       : 10px;
}

Here is how the div element looks with these CSS styles applied:

This div element has rounded corners.

As you can see, the div element now has rounded corners. The radius of the rounding is 10 pixels because I set 10px as radius (value) in the border-radius CSS property declaration.

The border-radius CSS property also works with background colors, even if the HTML element has no border. Here is a border-radius and background-color example: 

#theDiv {
    background-color: #66ff66;
    border-radius : 20px;
    padding       : 10px;
}

And here is what border-radius and background-color looks like when rendered:

This div element has rounded corners.

You can specify the radius of the rounding both vertically and horizontally. That way you can make the corners of the box elliptic instead of circular. Here is an example: 

#theDiv {
    border        : 1px solid #cccccc;
    border-radius : 20px / 10px;
    padding       : 20px;
}

Here is what the border looks like when rendered:

This div element has elliptic corners.

As you can see, the rounding is longer horizontally (20px) than vertically (10px).

You can also set the rounding of each corner individually by specifying four values for the border-radius CSS property. Here is an example: 

#theDiv {
    border        : 1px solid #cccccc;
    border-radius : 20px 15px 10px 5px;
    padding       : 20px;
}

The order of the corners is: Top left, top right, bottom right, bottom left. It is similar to the order of the borders in the border CSS property (top, right, bottom, left).

Here is what the corners looks like when rendered:

This div element has four circluar corners with different radius.

As you can see, each corner of the border has a different rounding radius.

You can also set the rounding horizontally and vertically for each corner like this: 

#theDiv {
    border        : 1px solid #cccccc;
    border-radius : 40px 20px 10px 5px / 20px 10px 5px 2px;
    padding       : 20px;
}

To the left of the / are the horizontal radii for each corner, and to the right of the / are the vertical radii of each corner.

Here is how the border looks when rendered:

This div element has four elliptic corners with different radius.

Just like with the border CSS property, the border-radius property has a set of subproperties that can set the radius of each corner individually. These subproperties are:

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius

The syntax for setting the rounding radius of a corner is the same as for border-radius. Here are a few examples: 

#theDiv {
    border                 : 1px solid #cccccc;
    border-top-left-radius  : 40px;
    border-top-right-radius : 40px / 20px;
}

As you can see, you can create both circular and elliptic corners with these subproperties too.

Border Images

CSS 3 enables you to use images inside your borders via the border image CSS properties. The border image CSS properties are:

  • border-image-source
  • border-image-slice
  • border-image-repeat

In addition to these border image CSS properties, you will also have to set border-style to solid (to get it to work in Firefox). You will also have to set border-width to whatever width you want your border to have (the border image will be resized to fit the border-width). Remember you can set border width individually for each border.

border-image-source

The border-image-source CSS property is used to reference the image to use as a border image. Here is a border-image-source example: 

border-image-source: url('/images/css/border-image.png');

border-image-slice

The border-image-slice CSS property can take between one and four values. These one to four values are slice coordinates. The meaning of the slice coordinates (x1, y1, x2, y2) are illustrated in this image:

illustration of border-image slice coordinates

Notice the four coordinates x1, y2, x2, y2. When you draw one vertical line through each of x1 and x2, and a horizontal line through each of y1 and y2, you end up with 4 lines in total. These lines cut the image into 9 slices. These 9 slices will be applied to the border of the targeted HTML element.

If you specify less than 4 coordinates, the browser will extrapolate all four coordinates from the values your specify. For instance, if you write only 50, the browser will assume that you mean 50 pixels in from each edge of the image. If you write 50 100 the browser assumes that you mean 50 pixels in from left and right edge, and 100 pixels in from top and bottom edge of the image.

Here is a live border-image example. If you resize the browser window you can see how the border image is being stretched to fit the div element it is applied to.

Here is a div with border image.

Here is the code used to create this border image: 

<style>
    #withBorderImage1  {
        border-image-source: url('/images/css/border-image.png');
        border-image-slice: 70;
        border-image-repeat: stretch;
        height : 300px;
        border-width: 70px;
        border-style: solid;
    }
</style>

<div id="withBorderImage1">
    Here is a <code>div</code> with border image.
</div>

Notice how the border-image-slice is set to just one value: 70. That means that the image should be sliced 70 pixels in from each edge of the image.

Notice also how the border-width is set to 70px. Since we are using 70 pixels wide slices from the border image, the border-width should be set to 70 pixels, to be able to display the border correctly. If you specified a value of 35px for border-width, then the border image would be resized from 70 pixels to 35 pixels before being rendered as border.

Finally, notice how the border-style is set to solid. Without this setting the border image is not rendered in Firefox (at the time of writing).

border-image-repeat

The border-image-repeat CSS property is used to define how the sections of the border image are repeated inside the border of the HTML element, if the border image and HTML element dimensions are not the same.

The border-image-repeat CSS property can accept one of these values:

  • stretch
  • repeat
  • round
  • space

The value stretch means that the slice will be stretched / scaled to fit the width or height of the border it is applied to.

The value repeat means that the slice will be repated to fit the width or height of the border it is applied to.

The value round means that the slice will be repeated a whole number of times. The repeated slices will be stretched to fully fit the border it is applied to.

The value space means that the slice will be repeated an whole number of times, but instead of stretching the slices (as in round), space will be inserted between the repeated slices.

Jakob Jenkov

Featured Videos

P2P Networks Introduction




















Advertisements

High-Performance
Java Persistence
Close TOC
All Tutorial Trails
All Trails
Table of contents (TOC) for this tutorial trail
Trail TOC
Table of contents (TOC) for this tutorial
Page TOC
Previous tutorial in this tutorial trail
Previous
Next tutorial in this tutorial trail
Next