In this second blog about CSS, the border properties are described. Simple borders are often found on webpages, but with the CSS3 specification a lot more is possible to create beautiful designs. Border-color is one of the well-known CSS properties and very easy to use. In most of the examples of this blog series a different border-color is used. However, some of the older browser versions do not support the newest border properties, but since they are usually not essential for the functioning of the website, they can be used safely.

Border-radius

With the border-radius property rounded corners can be created. The radius can be specified in px or as a percentage. The example below is created by using the following line of CSS:

border-radius: 70px;

Browser support is quite good for this property. Internet Explorer supports the border-radius property from version 9. The border-radius property may also be used to create circles. In order to do so, create an html element (e.g., a div) with equal width and height. By setting the border-radius to 50% a circle is created.

The border-radius can be specified for each corner seperately:

border-radius: 70px 10px 20px 30px; /* top-left, top-right, bottom-right, bottom-left corner */

Alternatively, the following code may be used:

border-top-left-radius:70px;
border-top-right-radius:10px;
border-bottom-right-radius:20px;
border-bottom-left-radius:30px;

Border-style

By using the border-style CSS property, the illusion of a three-dimensional element can be created. The example below uses border-style ‘ridge’, but groove, inset and outset have a similar effect. In addition, dotted, dashed, double and solid are valid border-styles. The following code is used to make the example below:

border-color: #00a8c6;
border-width: 10px;
border-style: ridge;

The color specified by the border-color is the light-blue color in the example. The darker color is automatically calculated. This also means that when you use a black color, the ‘ridge’ style has no effect, since the light and dark color are the same. It’s possible to use different border-styles for each side of the html element. For example, ‘border-style: ridge dashed;’ will give a dashed border on the left and right side, while top and bottom have a ridged border.

Outline

The CSS property outline will display a ‘border’ outside an element. When using the outline in combination with a normal border, it looks like the element has two borders.

For the layout of the outline, styling options comparable to the border properties are available: both may have a width, style and color. The following code is used for the example below:

border: 10px dotted #aee239;
outline: 10px groove #8fbe00;
background-color: #f9f2e7;
margin-left: 10px;
width: 580px;

Because the outline is positioned outside the html element (div), you have to correct the width and margins of the element if you want the total size of the element to be equal to the other examples on this page.

In Chrome, Firefox and Safari, there is an additional outline property: outline-offset. With this property, a space between the border and the outline can be created. However, this CSS property is not supported by Internet Explorer.

Border-width

The CSS property border-width is very simple to use: ‘border-width: 10px;’ will display a border of 10px wide. Border-width is one of the properties that is animatable and can therefore be used in combination with @keyframes.

In the following example the border width is animated between a value of 10 and 20px with the following code:

animation: animate-border-width 10s linear 2s infinite;	

@keyframes animate-border-width {
   50% {border-width: 20px}
   100% {border-width: 10px} 
}

Border image

Border image is a relatively new CSS property and not supported by older browsers (IE10 and lower). However, it’s a really cool property that gives a lot of possibilities to create nice borders.

When using the border-images property, first of all, the image file has to be specified. For the following example this image is used:

This image is then automatically sliced into 9 pieces, which will be displayed along the borders. The following code is used for the example:

	margin-left: 7px;
	border-width: 15px;
	border-image-source: url(circel-9-2colors.png);
	border-image-slice: 34%;
	border-image-repeat: round;
	border-image-outset: 7px;
	width: 586px;

For border-image-repeat three values are valid: round, stretch and repeat. Stretch is the default value and will stretch the orange dots over the full length of the border.

Border-image-slice defines how the border-image is sliced. This can be a percentage indicating which portion of the border image is used. Alternatively, a dimensionless number can be specified. The number then indicates how ofter the border image is repeated along the largest side of the html element.

With border-image-outset, the border-image elements are moved to outside the html element. As with the outline property, this will cause the html element to be bigger. In order to give all examples in this blog the same size, the width and margin of the example are adjusted.