If you need content to separate and pop on your HTML page, CSS Borders are the tool for you. Taking it further you can work on border sides to really enhance the effects!
Adding borders to an HTML page through CSS allows for the designer to amplify focus to a particular element or even create a uniform appearance for others. Changing the design for a confirmation button on a store page is one example.
Another example might be adding similar borders for a navigation menu to keep its appearance uniform across all pages of a site. Manipulating the sides of applied borders can help with these design concerns.
Thankfully, using the CSS border side property is not a difficult task to master. Calling the property into effect is as easy as applying color and line formats to it. Even if you are new to the world of HTML and CSS design, this guide will help guide you through the process with easy-to-follow example code and images.
Getting the Workspace Ready
The first step is to set up the example code so you have a reference to work from. A sample HTML and CSS file will be created to work through this process. Below is the code for the sample HTML page.
<!DOCTYPE html> <html> <head> <title>CSS Border Shorthand Basics</title> <link rel="stylesheet" href="CSSBorderSides.css"> </head> <body> <div> Udacity CSS Border Time!</div> </body> </html>
Following this, we have the code for the sample CSS file shown below.
div {
border: solid 8px;
border-color: black;
width: 200px;
}Note: Inside the sample CSS file, the single div element from the sample HTML file has been selected. It has also had a border color and style applied. A width was also set for ease of viewing. Another important item is that a border style is set as well. Currently, it is set as “double.” If a style is not set, the border will not appear!
Once these files have been set and saved, you should be able to open the HTML file within a browser window to see the following result as shown below.
With the basic setup complete, it is time to get into changing those CSS border sides.
The Border Side Property
With the basic example shown above, you have a div element with a full black border set around it. However, we will be able to change the CSS file to alter this. Going back into the sample CSS code, we will set out to only have one side of the border showing. The left side will be your target here.
How to Target Just One Side?
Before you aim to change a specific border side, the directional format needs to be addressed. The CSS border sides correspond clockwise to the four directions as follows:
- top
- right
- bottom
- left
To ensure our left border is the only one manipulated, it simply has to be defined in the property as such. This is as simple as stating the direction as shown in the example below.
div {
border-left: solid 8px;
border-color: black;
width: 200px;
}This will provide the following output on the HTML page.
In this example, the “border-left” property was called to indicate the left side of the border would be the target of the provided values. In this case, the values called for a solid line at eight pixels wide.
Altering this to fit another side is as easy as simply declaring that side in place of the “border-left” property. Any of the following would fit in place as well.
- border-top:
- border-right:
- border-bottom:
- border-left:
Note: Remember that these CSS border sides rotate in a clockwise direction, so the numbering in the list above does have merit. More on this in just a moment.
The code can also have multiple sides declared at once as well. In this example shown below, the right side of the border has been set up with a double-sided line in addition to the solid line value of the left side.
div {
border-left: solid 8px;
border-right: double 8px;
border-color: black;
width: 200px;
}This provides the following output on the HTML page.
The Matter of Direction
For this next example, the border side color will have another color value added, as shown below.
div {
border-left: solid 8px;
border-right:double 8px;
border-color: red blue;
width: 200px;
}In that example, the “border-color” property has the two color values of red and blue applied. This provides the browser with the information that the CSS border will respectively have a red and blue border added. This is the result of that code in use.
What Went Wrong?
As can be seen in the image above, the CSS border sides are both showing in blue. The red color value has not been applied. Or rather, it has been interpreted per the clockwise direction the border sides follow.
The browser took the directions as such. The “border-left” and “border-right” properties are being called, not just simply the value of “border”. This is the reason the colors provided of red and blue are directed to those border directions. However, the clockwise process is still followed by the border rules.
In this case, there was no “border-top” declared so the first color provided of red was ignored. The second color of blue was used as “border-right” was defined. As no other colors were provided, any remaining defined border sides used the last color available. This is why the left side took the blue border side color, as well.
To demonstrate the effect in full, the following code example below has all border side properties declared and the border colors are also set for each.
div {
border-top:double 8px;
border-right: solid 8px;
border-bottom:double 8px;
border-left:double 8px;
border-color: red blue orange purple;
width: 200px;
}This will provide the following effect for the borders on the HTML page.
The CSS Border Side Style Property
In the examples above, the border style was applied to the sides independently. These styles can also be directly called for the border as a whole using the “border-style” property. With the code example below, this has been applied to create a dotted border around the target div element.
div {
border-style: dotted;
border-color: lime;
width: 200px;
}This provides the following output on the HTML page.
There are a variety of options for the border side style to use as well. Try any of the following for yourself to see how they appear.
- solid
- none
- hidden
- dashed
- dotted
- double
- groove
- ridge
- inset
- outset
The following image examples show the “groove” and “outset” border styles in use.
Using Border Style On Specific Sides
As with the other options, this property effect can be set to a specified side of a border. To do this, the side simply has to be defined as before. Take the example below. The top and bottom borders will be set to groove styles while the left and right are set to the double style. The entire border will have a blue color apple.
div {
border-top-style: groove;
border-right-style: double;
border-bottom-style:groove;
border-left-style: double;
border-color: blue;
border-width: 10px;
width: 200px;
}This will give the following display on the HTML page.
Clockwise Border Direction Once Again
The same clockwise directional concepts used in the border side coloring also apply here as well. In the example below notice that only one “border-style” property is used with multiple values applied.
div {
border-style: dotted double groove inset;
border-color: orange red blue lime;
border-width: 10px;
width: 200px;
}Following the same clockwise process as before, you can see that the top border is set as a “dotted” value, the right at the “double” value, the bottom in the “groove” value, and the left as “inset” value.
Note: Notice the “border-color” property and values are also using the same clockwise concept to apply color to the corresponding border side values. This is an important concept to remember whenever you deal with borders.
This sample code will provide you with the following output on the HTML page.
Adding to the Design Power
Creating a border design provides a great set of options for not only how to make an element stand out, but it also gives a sense of personality to the overall HTML page design itself. Knowing where to balance those options along with the other tools in the CSS design set is key to unlocking even more flexibility for your work.
Consider reading into how to incorporate colors across the page with knowledge on CSS background color settings. Dive even further into that with the efficient use of CSS background shorthand concepts to have a clean and readable stylesheet. All of these components and more can lead you to a path of a site designer or even UI/UX roles. With this knowledge, the sky is definitely not the limit. After all, you are the one in control of your borders.
____________________________________________________________
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 Nano degree today to start the journey.
