The appearance of an element’s border, which is described mainly in terms of line style, color, and line width, can be specified in different ways by using longhand and shorthand properties. There are:
- Longhand properties for specifying line style, color, or line width for a specific border edge, for example, border-top-style.
- Shorthand properties for specifying line style, color, or line width for all or a combination of border simultaneously, for example, border-style.
- Shorthand properties for specifying line style, color, and line width for a specific border edge simultaneously, for example, border-top.
- Shorthand property, border, for specifying line style, color, and line width simultaneously.
In addition to properties for setting line style, color, and line width, there are those for specifying images and radius to use for a border, all of which are available in longhand and shorthand. It is worth knowing that for the border of a box and the changes made to it to be visible, the line style must be specified. This is because the browser displays no border for an element by default. Note that border properties, in general, can also be used for table’s <th> and <td> elements. How this is done is shown under the styling of tables in Chapter 17.
1. border-style
The border-style property is a shorthand property for specifying the line style for all the four edges of an element’s border. It is non-inherited, and the values that it supports are listed in Table 10.5. Figures 10.20 and 10.21 show how the property is used and depict the result.
Figure 10.22 shows how a list of space-separated values may be specified, so that different edges are given different styles, without using the longhand border-style properties. Figure 10.23 shows the rendered result. How the values are assigned to the edges is listed in Table 10.6.
1.1. Longhand border-style
The longhand versions of the border-style property are border-top-style, border-right-style, border-bottom-style, and border-left-style; these are used to apply style to the top, right, bottom, and left edges, respectively. Like the shorthand, they are non-inherited. Figure 10.24 shows how they are used, and Figure 10.25 shows the result.
1.2. Specifying Style for Logical Border Edges
The properties used to specify the line style for the logical border edge of an element are border-block-end-style, border-block-start-style, border- inline-end-style, and border-inline-start-style. Whether each defines the style for the top, bottom, left, or right border edge of the element depends on the value of the writing-mode property (discussed in Chapter 14). The properties are non-inherited and take the same values as the border-top– style, border- right-style, border-bottom-style, or border-left-style property. Figures 10.26 and 10.27 show the usage and result.
2. border-width
The border-width property is a shorthand property for specifying the thickness of the border of an element’s box. The longhand properties are border-top-width, border-right-width, border-bottom-width, and border-left- width, and the values supported by the properties are non-negative length values (e.g., pixels, em, rem, and cm) and keywords (e.g., thin, medium, and thick). The properties are non-inherited. Figures 10.28 and 10.29 show how they are used with various combinations of values and depict the rendered result. Table 10.7 shows how the values are assigned to produce the result.
2.1. Specifying Width for Logical Border Edges
The properties used to specify the logical border width of an element are border- block-end-width, border-block-start-width, border-inline-end- width, and border-inline-start-width. Whether each defines the thickness of the top, bottom, left, or right border edge of an element depends on the value of the writing-mode property (discussed in Chapter 14). The properties are non-inherited and take the same values as the border-top– width, border-right-width, border-bottom-width, or border-left-width property. Figures 10.30 and 10.31 show the usage and the result.
3. border-color
The border-color property is a shorthand property used to specify the color of the four edges of an element’s border. Like other border properties, it has longhand versions for specifying colors of individual edges, which are border-top-color, border- right-color, border-bottom-color, and border-left- color, all of which are non-inherited. The values that they support are color names and color values in decimal and hexadecimal numbers, and the alpha channel (i.e., rgba and hsla) is supported. See Chapter 9 for more on the syntax used for specifying color. Figure 10.32 shows how the property is used with various types of values, and Figure 10.33 shows the rendered result. Table 10.8 again lists how the border-color property values are assigned.
3.1. Specifying Color for Logical Border Edges
The properties used to specify the color of the logical border edge of an element are border-block-end-color, border-block-start-color, border- inline- end-color, and border-inline-start-color. Whether each defines the color for the top, bottom, left, or right border edge of an element depends on the value of the writing-mode property (discussed in Chapter 14). The properties are non-inherited and take the same values as the border-top– color, border- right-color, border-bottom-color, or border-left-color property. Figures 10.34 and 10.35 show the usage and the result.
4. border-top and border-bottom and border-right and border-left
The border-top and border-bottom and border-right and border- left shorthand properties allow you to specify the values for the color, style, and width of a specific border edge at once and in any order. Also, any of the values can be omitted; the browser will understand. All these properties are non-inherited. Table 10.9 lists the values that each is used to set. Figure 10.36 shows how the properties are used and Figure 10.37 the result.
In the example, the ,one{} rule makes the top border edge 2px thick, dashed, and red. In the ,two{} rule, the color value is omitted, so the default, black, is used. In the ,three{} rule, no style is specified, so the border is not displayed.
4.1. Specifying Logical Border Edges
The properties used to specify the logical border edge for an element are border- block-end, border-block-start, border-inline-end, and border- inline- start. Whether each defines the top, bottom, left, or right border edge of an element depends on the value of the writing-mode property (discussed in Chapter 14). The properties are non-inherited and take the same values as the border-top, border-right, border-bottom, or border-left property. Figures 10.38 and 10.39 show the usage and the result.
5. border
The border property is a non-inherited shorthand property that allows you to specify border-width, border-style, and border-color properties in one go with one rule. However, only one value is allowed for each of these properties, meaning that the same value is applied to all four edges of a box. Figure 10.40 shows examples of how it is used, and Figure 10.41 depicts the rendered result.
The values must be specified in the specific order shown in the example (i.e., border-width, border-style, and border-color). If one value is missing, the initial (default) value for the property is used. For example, the border for the first <p> element is not shown because no border-style is specified in the corresponding rule (i.e., p.one { border: thick; }) and initial value is none. The border-color property is also not specified. Although the initial value is black, it does not show, because the value of border-style is none. In the second <p> element, border-color is not specified, so the initial value, black, is used.
6. border-image
The border-image property is non-inherited and is a shorthand property for specifying the image to be used to style the border of a box, instead of the line styles provided by the CSS border-style property. The values supported by the property specify the image to use, where to place the slice lines to divide up the image, and how to display the sliced pieces. Figure 10.42 shows the image used here to demonstrate how the property works. It is 90px x 90px in dimension and is designed so that it is straightforward to determine the location of the slicing lines. The lines are specified in terms of how far in from the top, right, bottom, and left edges of the image to place them (i.e., where to slice the image). The image was created in Photoshop but can be created in any graphics program and should be in a standard image file format (e.g., jpeg, png, and gif).
Figure 10.43 shows how Figure 10.42 is used with the border-image property, and Figure 10.44 depicts the result. In the example, the border- style property is set to a visible style to allow the image to show, and the border- width property is set to a value that is large enough to let it show at the required size. The p{} rule specifies the properties common to the two <p> elements. The border-image property values in the p.round{} rule say to use the image in
Figure 10.42 (called “staroval.png”) for the border of the first <p> element. It says to slice it at 30px in from the top, right, bottom, and left edges, respectively, and repeat and scale the edge pieces (i.e., the ovals) as necessary. The comer pieces are always placed at the corners, as they are. The values of border-image property in the p.stretch{} rule say the same thing for the border of the second <p> element, except to stretch the edge pieces. Note that the border-image property may need to be repeated with vendor prefixes for older browsers. This is because the property is one of those implemented differently in browsers, especially in older ones. You will find more on vendor prefixes in Chapter 8.
You would have noticed that the middle piece of the image in Figure 10.42 is not used.
In order to use it, the longhand versions of the border-image property usually need to be used. Note that these longhand properties can also be used to achieve the same goal as Figure 10.44. Table 10.10 lists them and their functions.
TABLE 10.10
Longhand border-image Properties
Figure 10.45 shows how the middle piece of a sliced image is used, and Figure 10.46 shows the result. The p{} rule specifies the properties that are common to the two <p> elements. The border-image-source and border- image-slice properties work as described earlier in Table 10.6, and the fill value says to use the middle image piece as background. Notice that it is specified in place of the value for the top edge of the box. The p.round{} rule says to repeat the edge-image pieces for all the edges of the border and the middle piece for the background. The p.stretch{} rule says not to repeat but stretch them.
7. border-radius
The border-radius property is a shorthand property used to make the comers of a box round. It is non-inherited and takes one or two sets of values, each comprising one to four space-separated values, which can be in length values (e.g., px and em) or percentage values. When one set of values is specified, the corners drawn are circle- based, with each value representing the radius for each corner. When two sets of values are specified, the corners drawn are ellipse-based, with the first set representing the horizontal radii and the second set representing the vertical radii. The two sets of values are separated by a forward slash (/), as in 12px/5px. Table 10.11 describes how a set of values is interpreted.
Longhand border-radius properties are also used for specifying radius or radii for individual corners. They are border-top-right-radius, border- bottom– right-radius, border-bottom-left-radius, and border-top-left- radius, all of which are also non-inherited. Figures 10.47 and 10.48 show how the
Each corner is drawn with a radius of 20px. The declaration could also have been written as border-radius: 20px 20px 20px 20px . Notice that the content of the box is too close to the border. This is not aesthetically pleasing. However, it can be rectified by using the padding property, which is discussed shortly.
Figures 10.49 and 10.50 show how horizontal and vertical values are used with the border-radius property and depict the rendered result. The border-radius in the p.one{} rule says to use a horizontal radius of 25 em and a vertical radius of 1.5 em to draw all four corners. The border-radius in the p.two{} rule specifies a set of four horizontal radii, followed after the slash by a set of four vertical radii.
Using horizontal and vertical radii allows you to create non-symmetric and interesting shapes and even a circle, which is achieved, for example, by using the same width and height for the box and any radius more than half their size (e.g., { width: lOOpx; height: lOOpx; border-radius: 50%; }). Unfortunately, it is not always easy to produce the required shape with the border-radius property. To help out, there are free online border-radius generators, such as cssmatic.com, that allow you to design boxes with different combinations of radii and generate the corresponding code.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.