Video Transcript

Hi my name is Brian. I'm a web and graphics specialist, and today I'm going to show you how to make a round shaped menu in CSS. So I have an html document opened up right here in Firefox. As you can see I have a div on the left and a div on the right and within my right div I have a little menu and a div or in a UL that has a class of my menu. So UL has a background color gray and it's got some padding in it but as you can see all elements in regular CSS have boxed corners. Now using CSS 3 it's really easy to create rounded corners. The problem with CSS 3 is that it's not compatible in all browsers so you have to use some browser specific rules in order to target that div or that UL for a specific browser. So let me go in and paste some rules into my CSS document right here. So I'm looking at my unordered list with the class of my menu and I'm going to add, I'm just going to paste in some rules right here and I'll explain them in a second. So right here this third rule I added is the CSS 3 rule, border radius and all you're doing is assigning a pixel value that will delineate the size of the rounded corner. So 10 pixs is usually a pretty good size to use. The other three rules are browser-specific, so I have the standard moz rule for Mozilla browsers. I have the web kit rule for web kit browsers for web browsers like Safari and I have a khtml rule for old Conqueror browsers listed right here, so that should make it work in every browser. This is not supported by Internet explorer but you can add these rounded corners for more web standard compliant browsers. So let's just see what that looks like once I save and refresh, there you go, easy rounded corner. It's a lot easier than in the past when you had to use images for your rounded corners. It's just one simple rule and in the future, this rule should work for all browsers. So that's it that's how you make a rounded menu in CSS. My name is Brian and thanks for watching.