Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In CSS3 First Look, staff author James Williamson provides an in-depth introduction to the newest CSS standard, detailing its modular format, history, and current level of browser support, while also demonstrating its capabilities and applications. The course includes tutorials on using new selectors, modifying typography and color, working with the box model, and understanding media queries. Exercise files accompany the course.
In this chapter we'll discuss the modifications and additions to the box model in CSS3. I can't think of any better place to start than with border radius. By now, I'm guessing you've at least seen examples of the new CSS3 border radius property and may have even used it yourself. While border radius is a simple property to use, it solves what used to be a very complex problem: setting rounded corners on elements. In the past, many complicated workarounds were created, most involving extra markup and background images.
Now thankfully, the need for those methods are behind us now that we have border radius to work with. So to try border radius out, I have the mission.htm file. And what we want to focus on initially, let me just go ahead and preview this page, are these callouts. We have one over here in the sidebar and we have two down here. I'd like to go ahead and make those look a little bit nicer by rounding the corners of those. So let me go back into my code editor and I am going to switch over to the main.css, which you can find in the 06_01_CSS if you need to open that up separately.
Now, I am going to scroll down to about line 105 or so and find the callOut selector. So those div tags have a class entitled callOut and that's what they're receiving their styling from, so this is where we're going to add the border radius. Now, while most browsers, Safari, Chrome, I believe, and Firefox, have dropped the requirement of putting the vendor prefix on border radius, so that's sort of a requirement that we don't have anymore of this. The specification is mature enough now and the implementations are mature enough where we can just specify border radius.
The problem with doing that is that if somebody is on an older version of Firefox or an older version of Safari they won't see it. So for the time-being, we're still going top use these vendor prefixes. So we are going to type in -webkit- border-radius, and we'll use 15 pixels, so we'll start off with 15 pixels. We'll do the same thing for Mozilla, -moz-border-radius, 15 pixels and then finally we'll just go ahead and do the default, border-radius of 15 pixels.
And yes, if I were a smart man I probably would have coied and pasted there. All right, so let's go ahead and preview this. I'll try it out with Safari. We'll see how it looks. Obviously we can preview this in any of our modern browsers-- and we see we have some nice rounded corners on each of those callouts. That was really, really cool! Now, there's something really interesting about border radius. you can pass two values into border radius, and if you do that what happens is it basically splits the corner radius into two parts. One value is used for the top part of the border radius and one value is used for the bottom.
Let's take a look at how that works. What I am going to do is go back to our callOut, the selector here, and I'm going to change this. I am going to change it to 5px/20px. Now I am going to go ahead and do that for all of them, so now maybe I will be smart and copy and paste this. So 5px/20px, so one-half of the border radius is going to be only 5 pixels; the other half is going to be 20 pixels. Now what is that going to actually do for us? All right, well let's go ahead and preview that in Safari again-- and if I scroll down we can see that out border radius has changed dramatically.
You'll notice that it's really round on one side and kind of flat on the other. Now, again, if I just sort of -- I am going to move this over so we can see the values while we are looking at this as well. Notice that the first value we pass in, the 5 pixels, that's occurring to the top and bottom part of the corner radius. The 20 pixels is occurring to both of the sides. So the first value that you pass in occurs to basically the top and bottom portions; the second value pass in deals more or less with the sides of the radius. Now, let's try that with a much higher value so we can really exaggerate that difference.
What if we go to 10 pixels and 100 pixels? I mean, let's really crank that up, right? So 10px/100px, 10px and 100 px. Okay, so we'll save that again and we'll test it again, and as I scroll down, very, very different effect. But a very cool effect. You can see that we could actually pass zero values and only round it in one direction, giving us a really interesting effect on this.
Now obviously the size of the element itself really affects how the border radius changes the element itself. In the short ones down here, we are getting almost sort of this concave shape of the whole element whereas our taller one up here, that change is really sort of occurring at the top and the bottom. So if you're working with a specific size you can really tailor those split values to create some very unique shapes. If you're working with elements that are going to flex you need to be kind of aware of what it's going to look like at a smaller size versus a larger size so that you don't get an effect that is rather unflattering should we say.
Okay, I am going to go ahead and close that and then I'd just want to come back in and set this all total to 5 pixels. So I'm going to change both of those values to go with something a little bit more subtle. At 5 pixels I am going to save that, we'll test that one more time -- there we go. A much more subtle, not as rounded, but a really nice little technique that makes the elements look quite not so boxy but it doesn't round them to a level of being a stylistic change. So I am going to ahead and close that, go back into my code, make sure I've saved everything.
Now, you might be wondering about support for border radius and I mentioned earlier that support for border radius is pretty good. And as you can see, support for border radius is fairly broad. Now Internet Explorer is supposed to add support in version 9 so we'll have to see about that. Noticed that a lot of the browsers have dropped the need for the vendor prefix so the implementation is absolutely stable across multiple browsers. It's pretty mature. Now for the time being, you still need to use the vendor prefixes to make sure that you're supporting it properly in older browser versions, but they really won't be needed in the near future.
So now that we've seen how border radius works we're going to take it a little bit further in our next movie by creating asymmetrical rounded corners.
Find answers to the most frequently asked questions about CSS3 First Look.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.