How to Make Double Borders With CSS
Styles let you add various kinds of enhancements to Web page elements. Borders are useful to style when you want to bring attention to a particular area, such as an important paragraph or a picture that you want to frame. CSS allows you to apply different styles to a border.
Other People Are Reading
Instructions
-
-
1
Open the style sheet file in your Web page editor or any plain text editor. Look for the element that you want to apply a double border style to. For example, if you want to apply the style to the element <p>, look for the CSS rule for the <p> tag as shown below:
p {
} -
2
Insert the property "border-style" in the "p" rule. Type "double" as its value as shown below. Note how a colon separates property and value, and how the declaration terminates with a semi-colon.
p {
border-style:double;
} -
-
3
Click "File" and then click "Save" to save the changes to the style sheet file. The changes will reflect in every Web page that links to the file.
-
1
Tips & Warnings
Add the "border-width" property if you want to specify the thickness of the border. You can choose from three standard values "thin," "medium" or "thick," or enter the value in pixels such as "5px" (without quotes). If you do not specify a border thickness, the default will be used. Note that the "border-width" property has no effect if you do not set the "border-style" first.
If you use double borders and border thickness together, the sum of the two borders and the space in between equals the set thickness.
