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

CSS3 First Look

Creating custom rounded corners


From:

CSS3 First Look

with James Williamson

Video: Creating custom rounded corners

There are going to be times when symmetrical rounded corners just aren't enough. No. You are going to find yourself wanting some corners rounded. Some not. Maybe even one of the corners of an element rounded but with different values. So can we do that with CSS three? Of course we can. So I have the index.htm file open in the 06_02 folder and let me kind of give you a preview of what we are going to be doing. I am going to go ahead and open up this document in Chrome. And essentially, we are going to be taking this info box here and just rounding the bottom corner, just to give it a little flair there, and then down a little bit further, the Tour Spotlight, we are going to be rounding two of the corners and then leaving two of the corners square.
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

Creating custom rounded corners

There are going to be times when symmetrical rounded corners just aren't enough. No. You are going to find yourself wanting some corners rounded. Some not. Maybe even one of the corners of an element rounded but with different values. So can we do that with CSS three? Of course we can. So I have the index.htm file open in the 06_02 folder and let me kind of give you a preview of what we are going to be doing. I am going to go ahead and open up this document in Chrome. And essentially, we are going to be taking this info box here and just rounding the bottom corner, just to give it a little flair there, and then down a little bit further, the Tour Spotlight, we are going to be rounding two of the corners and then leaving two of the corners square.

You'll notice that the callouts have these symmetrical rounded corners that we created in our last movie. So I am going to go ahead and close that. And I am going to switch over to the main.css file. If you are using a program like Dreamweaver, you can just click right over to it, which is very handy. All right, I am going to scroll down to find the mainInfo selector and it is on about line 607. It's really handy to know that. So here's our mainContent, mainInfo, right at line 607. And we are going to ahead and add our asymmetrical rounded corners.

Now we are going to do this using a longhand first. Why? No, I don't want to show you how inefficient it is, but it also helps us really understand what's going to happen when we use the shorthand notations. So yes, this is going to be a little bit of typing, but it will be worth it because we're going to learn something. -webkit-border-top-left-radius. You probably have some inkling of what we are in here for. So we are specifying the top left radius independently. We can do that for top left, top right, bottom right and bottom left.

And we are going to have to do that for WebKit, Mozilla and then just the basic. So you are darned tooting I am going to be copying and pasting in here. So I am going to go ahead and do 0 pixels for this. Remember I said that we only want to round one corner. So here I am going to do -webkit-border-top-right-radius. And that's going to be set to 0 pixels as well. By the way when you pass these values independently of each other here, the order that they show up in does not really matter. Later on when we are doing shorthand notation, you are going to see that the order that they are specified in really does matter.

All right, so bottom-right-radius and we are going to leave that one at 0 pixels as well. Zero by the way will work just fine, but I like being specific like that. So webkit-border-bottom- left-radius. Isn't this fun? And here we are going to do 20 pixels worth of radius. So okay, there are our rounded corners, zero pixels all the way around except for the bottom left-hand corner, which is going to be 20 pixels. All right, so after typing all of that I really don't feel like typing it all again.

So I am going to copy this and then just paste it and change out the WebKit for Mozilla -moz prefix. Now, normally this is all you have to do. I'll go ahead and change that out and you are good to go. But it really pays to go and read a little bit about the browsers themselves and their prefixes because they're not always the same. Now I am going to go ahead and paste this down here again and get rid of the WebKit one, just so I have the default implementation. But I want to come back to my point about the Mozilla prefix in just a moment here.

I need to come back up to the Mozilla one because unlike the WebKit one and the default one, there is a slight difference in syntax with the Mozilla one. So where as it says top left radius, it actually needs to say border-radius-topleft, all one word. So don't always assume that it's always exactly the same property with just a prefix thrown on the front end of it. It is definitely not the case. So I need to go ahead and change that for all of these. So border-radius-topright. I'm trying to be really careful to make sure don't mess up my radii, if you will.

And that's going to be bottomright, all one word, and the same thing here, radius-bottomleft, all one word. That leads me to a larger point about these prefixes. I want to go ahead and apologize to the folks who are on Opera, Microsoft, and Konquerer because I really haven't been including those vendor prefixes in any of the exercises. So the -o, the -ms, the -khtml. That's not really an unintentional oversight. Most of those browsers with the exception of Internet Explorer do support these CSS three properties that we are working with.

And putting a -o prefix in front of most of the properties that we are using will enable it to work in Opera just fine. The problem is you only have so much time to do a movie. So I want you to make sure you go back and watch the movie at the very beginning of the title about vendor prefixes and then spent some time in the development section of those browsers. Go check out the one at Opera, the one at Safari, the one at Mozilla, the one at Konquerer and the one at Microsoft. And you will read more about the properties that they do support and if there's any difference in the syntax, other than the vendor prefix, there's a wealth of knowledge on those sites and I'd advise you to go check those out so that you make sure that your code's going to work across as many browsers as possible.

Let's go ahead and save this, and I am going to test this out in Firefox to see if we've got the prefixes right. And we do, there we go. We are getting the rounded corners in Firefox, which is lovely, and then just to make sure it's working in a WebKit-based browser too I'll try out Chrome. Fantastic! We are getting that asymmetrical rounded corner. That works wonderful, but, as I mentioned, this is ridiculous, this type of syntax is terrible, and imagine if you had to throw Opera and Konquerer or vendor prefixes in there as well, you'd rapidly end up with double the lines of code just for what's really a very simple thing. Well! One of the things that we can do is we can pass shorthand information for our border radius.

We don't have to explicitly define every single one of these guys. Let me show you what I mean. I am going to get rid of everything except for the top line. And now what I am going to do is just target webkit-border-radius. So we are really back the sort of what we've been using in the past couple of movies or so. And now what I am going to do is I am going to pass multiple values. Make sure we are going to go ahead and pass four. So I am going to pass 0 0 0 20 pixels. If you've ever worked with shorthand notation for margins or padding, you know exactly what you are looking at.

Essentially, it works with the same, that if you remember that sort of mnemonic device, trouble- TRBL, top, right, bottom, left. So those are the corners that we are using for our border radius. And now it really is a lot simpler in terms of dealing with the syntax. Now I can just sort of paste this over again. This time I can just do the Mozilla prefix on that, not worry about syntaxtual differences, and go ahead and do the default one as well. If I save this and preview it, you will notice we get exactly the same effect whether we're previewing in Chrome or whether we are previewing at in Firefox. So that's awesome.

It's going to save us a lot of code and a lot of trouble. Now if you are wondering about the shorthand notation, obviously we are passing four values for all corners. What if you pass less than that? Okay, let's give that a try. What if we pass 0 0 20, 0 0 20, 0 0 20? Would we get the same results? Let's see. No, we did not. As a matter of fact notice that it was the bottom right-hand one that is now rounded. So how does this work? If we do four values, we are doing topleft, topright, bottomright, and bottomleft, so it starts with the topleft and it just kind of goes around the element like a clock, just goes in a clockwise fashion.

If we use three values like we used here, the first value is going to be topleft, the second value is going to be the topright and the bottomleft, so opposite corners, and then the third value is going to be bottomright. If we do two values, let's go ahead and shrink that down to two values. So we do two values and what we get, we get topleft and bottomright, topright and bottomleft. So we get opposite corners when we are doing that, okay.

So if you can remember that, it's actually pretty easy to remember. It's very much like when you are doing margins and padding, and of course if we went down in one value it would be that way for everybody. Okay, so let me move that back up to four values, there we go. So we are just going to be rounding that bottom left-hand corner with our shorthand notation there. Now I am going to go ahead and copy this shorthand notation because if you remember we have one more element to round the corners on and that would be the spotlight selector.

You can find that one on about line 669, so I am going to just sort of scroll down a little bit and there I have it, find it right there. I am going to paste the code, but of course that is not the value that we want for our spotlight. For our spotlight we want the top right and bottom left-hand corner to be rounded. So using shorthand notation we know how to do that. We can simply pass two values in, 0 and then 20. The 0 will be used remember for topleft, bottomright. The 20 will be used for topright, bottomleft.

All right, so I am going to go ahead and save this. Preview that in my browser, and that's exactly what we are getting. So bottomleft is rounded, topright is rounded, whereas topleft and bottomright are square. So it gives us a nice unique look for that particular element and sort of draws attention to it. It may seem little confusing to keep saying topleft, bottomright. You might get confused as to what's what, but trust me if you just work with this a little bit in terms of using shorthand notation, you will come to grips with exactly what it's doing very, very quickly.

So as I've shown you, the code to create these asymmetrical corners can get a little clunky. If you remember those shorthand notations, it can make your life a lot easier. Now remember the values start in the top-left corner and then go clockwise around the element. Fewer than four values is going to split the corners into groups, with opposite corners as members of each group and that's a little easier to remember. Okay, so next step we are going to take a look at another very useful addition to the box model in CSS3, the border-image property.

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