Start learning with our library of video tutorials taught by experts. Get started

CSS3 First Look

Using border-radius


From:

CSS3 First Look

with James Williamson

Video: Using border-radius

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.
Expand all | Collapse all
  1. 3m 5s
    1. Welcome
      1m 20s
    2. Using the exercise files
      1m 45s
  2. 31m 30s
    1. What is CSS3?
      5m 26s
    2. The current status of CSS3
      3m 35s
    3. An overview of CSS3 capabilities
      2m 24s
    4. Can you use CSS3 now?
      5m 31s
    5. Detecting support for CSS3
      9m 0s
    6. Understanding vendor prefixes
      5m 34s
  3. 1h 9m
    1. An overview of child and sibling selectors
      3m 11s
    2. Using child and sibling selectors
      7m 17s
    3. An overview of attribute selectors
      3m 19s
    4. Using attribute selectors
      8m 32s
    5. Pseudo-class UI selectors
      5m 56s
    6. Negation pseudo-class selectors
      6m 48s
    7. Target pseudo-class selectors
      5m 39s
    8. Structural selectors
      3m 58s
    9. Nth-child selector syntax
      10m 0s
    10. First, last, and only structural selectors
      5m 39s
    11. Using structural selectors to write more efficient code
      8m 52s
  4. 45m 28s
    1. Color formats in CSS3
      7m 9s
    2. Transparency in CSS3
      9m 10s
    3. CSS3 gradients
      4m 11s
    4. Creating linear gradients
      13m 57s
    5. Creating radial gradients
      11m 1s
  5. 49m 8s
    1. Working with web fonts
      6m 38s
    2. @font-face syntax
      4m 52s
    3. Downloading sample fonts
      6m 5s
    4. Writing @font-face declarations
      7m 57s
    5. Using web fonts
      6m 42s
    6. Using text shadows
      7m 14s
    7. Creating multi-column text
      9m 40s
  6. 50m 55s
    1. An overview of the flexible box model
      4m 42s
    2. Controlling box orientation
      5m 2s
    3. Setting element flexibility
      12m 59s
    4. Distributing boxes
      7m 54s
    5. Controlling box alignment
      12m 38s
    6. Working with box-sizing
      7m 40s
  7. 1h 5m
    1. Using border-radius
      6m 20s
    2. Creating custom rounded corners
      10m 21s
    3. Understanding border images
      5m 15s
    4. Using border images
      8m 52s
    5. Creating box shadows
      8m 58s
    6. CSS3 backgrounds
      4m 55s
    7. Controlling background size
      8m 46s
    8. Creating multiple background images
      6m 4s
    9. Using background-origin
      3m 18s
    10. Clipping background content
      3m 2s
  8. 40m 8s
    1. An overview of CSS3 2D transforms
      4m 26s
    2. Using 2D transforms
      8m 16s
    3. Setting transform origins
      5m 24s
    4. An overview of CSS3 transitions
      5m 0s
    5. Animating CSS properties
      6m 12s
    6. Using easing in animations
      5m 41s
    7. An overview of 3D transforms
      5m 9s
  9. 37m 56s
    1. Understanding media queries
      6m 18s
    2. Strategies for targeting multiple devices
      6m 4s
    3. Writing styles for target screen sizes
      12m 11s
    4. Deploying styles through media queries
      3m 55s
    5. Basing media queries on page orientation
      2m 24s
    6. Targeting media queries for iOS devices
      7m 4s
  10. 1m 6s
    1. Goodbye
      1m 6s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
CSS3 First Look
6h 34m Appropriate for all Nov 29, 2010

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.

Topics include:
  • Understanding the history of CSS3
  • Working with the new selectors
  • Adding transparency and gradients
  • Specifying web fonts with @font-face
  • Understanding the advances to page layout
  • Looking at CSS3 box model capabilities
  • Using 2D and 3D transforms
  • Understanding media queries
Subject:
Web
Software:
CSS
Author:
James Williamson

Using border-radius

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.


Expand all | Collapse all
Please wait...
Q: I'm following along with the video "Transparency in CSS3".  James shows us how to achieve transparency in Internet Explorer by going to Kimili.com and entering a HSLA value to generate code for transparency.

Here that code:

background: transparent;-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF0E0C0B,endColorstr=#BF0E0C0B)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF0E0C0B,endColorstr=#BF0E0C0B); /* IE6 & 7 */ zoom: 1;

When this code is added to my HTML file it removes transparency on browsers that do in fact support it. So I'm left with NO transparency. Why?
A: The problem is in the filter code. If the IE background is called last, the first "transparent" declaration will remove all previous colors, regardless of browser. To resolve this, place the rule inside a conditional comment for IE or remove the "transparent" declaration at the front of the rule.
Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed CSS3 First Look.

Return to your organization's learning portal to continue training, or close this page.


OK

Course retiring soon

CSS3 First Look will be retired from the lynda.com library on April 24, 2014. Training videos and exercise files will no longer be available, but the course will still appear in your course history and certificates of completion.


Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked