Using CSS borders in your HTML work can add great design options and separate content to a webpage. However, that is only the initial step in using those borders. CSS is all about applying creative styling to HTML and the world of CSS borders is no exception to this.
The CSS Border Style property provides the options to visually define the applied CSS border itself. In this easy-to-follow guide, you will see how to apply the CSS border styles as well as how to take them a step further to create some spice to the designs. If you are new to CSS in general, please refer to the Basics of CSS guide first to get a good bearing on the general CSS concepts.
Setting Up a Sample Border
Before you get started, you need a canvas to work with. For this, you can use an HTML page with a CSS stylesheet to edit along with the tutorial. The sample code below is provided if you wish to copy it for the examples. You can also use your own code if you wish.
Sample HTML Page:
This is a sample code for creating a quick HTML page. Note the referenced stylesheet included in the code.
<!DOCTYPE html>
<html>
<head>
<title>CSS Border Shorthand Basics</title>
<link rel="stylesheet" href="CSSBorderStyles.css">
</head>
<body>
<p>Udacity CSS Border Styles!</p>
</body>
</html>Sample CSS Stylesheet:
Here is a sample stylesheet to use in conjunction with the sample HTML code provided above. If you use your own style sheet, be sure to reference the correct name in the HTML code.
p {
border-style: dotted;
border-color: black;
width:400px;
text-align: center;
}
html {
background-color: #cad5e3;
}Note: You may notice other items set in the CSS stylesheet as well. The paragraph, (or “p”), element has been provided with a width property and text alignment. The “html” element was given a background color too. These style options were used for ease of displaying the sample output images. There is no harm in omitting it from your example if preferred. If you want to know more about these options, please read the blog post on using CSS Background Color here.
If you save both files locally and open the sample HTML file in your browser, the output should appear as shown in the example below.
With the sample files setup and ready to go, you can move on to styling options.
CSS Border Style Property: An Absolute Necessity for Styling
In the sample CSS code, you may notice the dotted border style that has been applied to the paragraph. That particular section of the code is important for the presentation itself. Without the border style property set, there would be no visible border applied to the HTML page.
Directly put, if the border style is not set, the border will simply not appear on the page. If the CSS border style property is left blank, it will not default to a selected style as the default style is nothing at all.
p {
border-style: dotted; ←[Requires a value for a border to show!]
border-color: black;
width:400px;
text-align: center;
}
Changing the CSS Border Style
Now that you know you need a CSS border style set, you may want to explore various options available to you. Altering the CSS border style is as easy as replacing the provided value with the desired style you wish to apply. The options available for this selection are provided below.
- none: This value states that no border is set. This is not the same as hidden.
- hidden – This value provides a hidden border. Note the border is still there, so its properties can affect other elements on the HTML page.
- solid – With this value, a solid border is added.
- ridge – This border sets a ridged 3D effect for the border. The set color value(s) alter the appearance of the ridges.
- dotted – This value provides a simple dotted border style effect.
- dashed – This option will use a dashed border effect.
- double – This value will create a double-lined border on the element.
- groove – This value sets a grooved border with slight 3D effects. The set color value(s) will affect the result.
- inset – This value defines the border with an applied 3D effect on the interior of the border. The set color value(s) will affect the result.
- outset – This value defines the border with an applied 3D effect on the outside of the border. The set color value(s) will affect the result.
In the images below, you can see some examples of the values in effect.
Outset Style:
Groove Style:
Double Style:
Note: The borders in the examples above have been provided with two colors to better display the style selection differences. For more information on setting border colors in detail, please check out the blog post on CSS Border Color.
Extra Style — Changing CSS Border Corners
Taking the styling a bit further, you can also manipulate the corners of the border itself to provide unique design options for the page. For this example, you can use the “border-radius” property to make the rounded changes. See the code example below to see it in action.
p {
border-radius: 50px;
border-style: double;
border-color: black red;
border-width: thick;
width:400px;
text-align: center;
}The border-radius property takes a size value in pixels. In this example, the size value provided is set to “50px” to give the effect of a rounded border. The image below reflects this change.
The border-radius settings can also be applied to the individual corner sets as well. This is done by calling each border side in the property as shown in the code example below.
p {
border-radius: 10px 30px 5px 100px;
border-style: dotted;
border-color: black;
}As with other values in CSS, there is an intended order of direction for these entries that needs to be understood. For this, the intended direction is clockwise starting with the top. This means the values correspond to top, right, bottom, and left. This will provide the following output as shown below.
Crossing the Style Border
These options for using the CSS Border Style property are great to get you started in creating new unique looks for elements on an HTML page. Consider how you could apply these options to items such as custom buttons, banners, or even direct navigation menus for the site.
Other options such as padding, animations, and multiple borders also help to extend design options further. Deciding on which to learn first can be a daunting task at first. However, tackling the core basics of CSS will help you to understand not just what to learn, but how to learn it. The direction is just as important in learning as it is in CSS properties.
For more information check out the CSS Content Hub to help guide your choices. Concepts such as the use of the Border Shorthand property can take just moments to learn and provide great enhancements to the overall use of CSS.
Noting how important direction can be, have you considered a path to give you the best outlook on the job market? The modern world runs on code and that code comes from people like you.
If you are looking to fly farther and stronger than ever before, take the first steps with code. Learning to code can help you open doors to those new possibilities of a better you. Embrace Udacity’s Intro to Programming Nanodegree program today to start the journey.
