HTML, CSS, WEBSITE DEVELOPMENT AND DESIGN (2015)
Chapter 13: Borders
We are gonna learn about the border property in this chapter. You can add a border to any element on your page whether it's an image or a paragraph. We'll work with our h1 and h2 elements a little bit. Let's center these headings and add borders around the text. So go up to your h1,h2 rule in your CSS code and add this to it:
h1,h2{
background-color: blue;
color: white;
text-decoration: underline;
text-align: center;
border-width: 4px;
border-color: white;
border-style: solid;
}
®text-align: center; So first we center aligned the text for our heading.
®border-width: 4px; Now with our border property we start building our border. We set our border-width property to 4 pixels thick.
®border-color: white; Next we tell the browser that we want the border to be white.
®border-style: solid; And finally we set our border to solid. There are many other values that could have been used here instead of solid like dotted, dashed, double, groove, ridge, inset, outset, none, and hidden. You can try out the other values to see what kind of results you get. We used solid here because it's a very common style to use for a border.
Now when you run your code you should see that both your h1 and h2 headings are now centered with a 4 pixel thick solid white border. Let's add a border to our paragraphs with a specified width. Add this code to your p rule:
p {
color: red;
background-color: black;
font-family: tahoma;
font-size: 20px;
text-align: center;
border-width: 2px;
border-color: white;
border-style: solid;
width: 50%;
}
Run your new code. You'll now see that you have a border around all of your paragraphs and they take up 50 percent of the width of your screen because we specified that in the width property. Another thing that you should know is that if you change the size of your browser window your paragraphs will change in size as well to match the value of 50 percent. So using percent here instead of pixels is good because no matter what size computer screen that your viewers have your paragraphs will always be 50 percent of their screen. It doesn't have to be 50 percent. This is just an example. You could have it be 41% if that fit you needs when positioning and sizing elements on your page.
These border properties that we just entered into our CSS rules can be written in a much simpler way. Some coders prefer to code in this way because it's easier for them to understand. If you wanted to, you could replace all of these properties below:
border-width: 2px;
border-color: white;
border-style: solid;
with just one line of code. And the code would look like this:
border: 2px solid white;
This is called shorthand because your combining multiple properties on one line of code. This code will do the exact same thing as the border-width, border-color, and border-height properties did. It's up to the coder to decide which way they prefer.
The Border-Radius Property/Border With Rounded Corners
There is another border property that is useful for giving your page a nice look and that property is border-radius. This property will round the corners of the border that you add the code to. Add this code to your p rule and run it in the browser:
p {
color: red;
background-color: black;
font-family: tahoma;
font-size: 20px;
text-align: center;
border: 2px solid white;
border-radius: 20px;
width: 50%;
}
®Now you have a border with rounded corners at a radius of 20 pixels. You could try other values here as well to get the amount of radius that you prefer like 5px or 12px.
®Take notice here that if your run this code in Google Chrome you will have rounded corners on your border but if you run it in internet explorer you won't. There is a way to fix this and that is by adding a prefix to the property. Add this code to your p rule:
p {
color: red;
background-color: black;
font-family: tahoma;
font-size: 20px;
text-align: center;
border: 2px solid white;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
width: 50%;
}
®-webkit-border-radius: 20px; By duplicating the border-radius: property code and adding the prefix -webkit- your border will now have the rounded corners in Internet Explorer.
®-moz-border-radius: 20px; By duplicating the border-radius: property code and adding the prefix -moz- your border will now have the rounded corners in Mozilla Firefox.
®Anytime that you have this type of issue you could try duplicating your property and adding these prefixes to your code. There are some other prefixes that you can use as well. We will use them later in this book. Basically in a nutshell, Some of the browsers can display the code fine while others won't. These prefixes come from a web kit that makes them compatible. It all depends on when the browser gets the updates to be able to accept the code. FYI, Even after a browser would get an update for something like this where you didn't need the prefixes anymore, The extra code wouldn't mess up your page. This is one of the reasons why running your code in multiple browsers often is so important. And you will come across this issue with other code. Usually it is new code added to HTML or CSS that this happens with. And the browser kind of ignores it if it's not set up to know what to do with it. When a problem comes up try this technique and it should solve your problem.
UPDATE FOR BROWSER PREFIXES
This is an updated list for browser prefixes that you can add to your code to make it work properly in other browsers. I figured this will be the best place to add this update since we just started discussing prefixes. You can duplicate your code and try these prefixes anytime you have this type of issue come up where the code is working differently in some browsers. The list below will name the prefix and what browser it will affect.
®-moz- Firefox and other browsers that use Mozilla's browser engine.
®-webkit- Safari, Chrome and other browsers that use the Webkit engine.
®-o- Opera.
®-ms- Internet Explorer. (This doesn't always work). If it doesn't try -webkit- or -moz- but it's probably best to just add all four to make sure you have all of your bases covered.
You could also round your border corners independently to get a different look. And to give you an example of that instead of the border-radius properties that we just added you could have coded it like this:
p {
color: red;
background-color: black;
font-family: tahoma;
font-size: 20px;
text-align: center;
border: 2px solid white;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 0px;
border-top-left-radius: 0px;
border-top-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-webkit-border-bottom-right-radius: 0px;
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 20px;
-moz-border-bottom-left-radius: 20px;
-moz-border-bottom-right-radius: 0px;
-moz-border-top-left-radius: 0px;
-moz-border-top-right-radius: 20px;
width: 50%;
}
®If you use this code only your top right and bottom left corners of your border will have a radius. It gives a pretty nice effect. You could round one corner or three, change the radius amounts. It's totally up to you.
®And as you can see we have to duplicate this code three times and add the -moz- and the -webkit- prefixes to make this style compatible in Chrome, IE, and Firefox.
That's gonna wrap up this chapter on borders. You should play around with different border properties to get a good feel for how to use them. You can literally make thousands of different borders. For example you could have a border with only three sides and you can color them all differently. Or have two sides thicker than the other two. You could use the properties in many ways. Here is a list of some of the useable border properties for you to experiment with. You can use these properties on any element that you want to add a border to.
List of border properties
· border:
· border-top:
· border-bottom:
· border-left:
· border-right:
· border-top-left:
· border-top-right:
· border-bottom-left:
· border-bottom-right:
· border-radius:
· border-top-left-radius:
· border-top-right-radius:
· border-bottom-left-radius:
· border-bottom-right-radius:
Quiz Chapter 13
1.What is a shorthand property?
2.What are some of the benefits of using the width property with a percent value instead of a pixel value?
3.What are the names of the two prefixes that can be used to try to have your styles take affect in Internet Explorer and Mozilla Firefox?
4.If you wanted to add a border radius to all four corners of your border, What property would you use?