Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
CSS continues to evolve and as it does, capabilities that were either impossible or very difficult to do in the past have suddenly become relatively simple. Such is the case with rounded corners and in the past creating a rounded corners relied on adding additional markup to your HTML, using images to simulate the effect of rounded corners and all sorts of crazy jump into the hoops kind of things. Well now it's as simple as declaring a single property and I want to show you that by using the rounded-corners file, which is found in the 05_07 directory.
So here we have a very simple structure we have just a little heading one, so it's creating around the corners, and then we have a paragraph on which we are going to round corners. If I preview this in the browser, I can see that we just have an element defined here as a box and I have got a background color applied to it so that we can see kind of how these rounded corners are going to work. Okay now, the syntax for this is relatively simple, I am going to scroll up and find my paragraph rule here and on a line just below that I am going to type in border-radius and give it a border-radius: 25px; If I save this and preview this in the browser you can see right there rounded corners, voila.
You know that's not going to be that big of a deal to a lot of you guys out there, but if any of you have tried to do that prior to this capability you will be jumping for joy the way that I am. The syntax can get a little more complex than this, so let's go back and take a look at some of the options that we have with the syntax. So if I go again back into border- radius, after 25px I am going to do a space there and I am going to do 10px. So essentially, when you pass one value much like the margin and padding shorthand notation when you pass one value, its given to all sides equally, but when you pass multiple values now you're changing some of these corners independently to one another.
When you pass two values like this, the first value indicates the top left and bottom right-hand corner so they are kind of opposite corners. The second value indicates the bottom left and top right-hand corner. So if I say this, preview it you can see what I am talking about. Here we have very round corners on the top left and bottom right and on the opposite corners we are using the smaller value. Now you can also do three values. So after the 10px I am going to do a space here and I will do 5px so we can really kind of see the difference here. And when you use three values the first value is going to be top left, the second value is going to be bottom left top right and the third value is going to be bottom right.
So its kind of splitting those first two values if you will. So if I save this and preview it, you can see what I am talking about, the last value there is now that bottom right-hand corner, the first value is this one and then these guys have an equal radius or radii. And then finally after the last one I am just going to type in zero to give all four, now if you're doing for, its sort of that same trouble thing if you will, top left, top right, bottom left, bottom right. So if I save this and preview it you can see what I am talking about, it just starts to the top left and it just kind of goes all the way around very-very lovely.
Now you also can define the radius individually if you would like, I am now going to get rid of these multiple values. And I could also say border-top-left-radius; So I could do the same thing, top right, bottom left bottom right, just go ahead and place those guys in the middle like this, if I save this and test it, you will notice that the only corner that's getting any type of border radius is the top left. Now the values themselves, you can do some pretty interesting things with these as well.
Whenever you are looking at a rounded corner radius, you basically have two values here, you have the horizontal and you have the vertical radius to this and you can change those two values. Let me show you what I mean by that. So let me modify this syntax yet again I'm a basically reduce it down to border radius, save it, and then I am going to do 25px/15px. I am going to save that, test it, and now what you're seeing is, you are seeing kind of a flattening on the bottom hand sides of this whereas the horizontal radius is still quite robust.
And you can experiment with these values a little bit. So let's go down to like 5px and let's go up to 30px, if I save this, you can see exactly what I'm talking about. Typically when you give it just one value without the forward slash between the two of them its used for both of them, but if you'd like to tweak that a little bit, you can certainly do that and you can actually create some pretty interesting effects this way, I had seen people create cigar like shapes and all sorts of fun stuff with this. So play around those values little bit and see if can come up with any of those special effects on your own.
Now I want to mention a couple sites for you because while simply declaring border radius is fairly simple, the syntax can be a little bit more complex. So I am going to recommend that you go out and read to the CSS backgrounds and borders module level 3 you can find a w3.org/css3-background and if I scroll down little bit here, I can find this rounded corners section and this is going to give you a lot of diagrams to explain to you what the horizontal and vertical radius are in terms of the curve. It's going to give you a lot of different examples of syntax, let's if I can show you how to do things like corner shaping based on the padding.
So there is some really neat stuff here where you can read up on border radius and really customize what you're doing with a particular property. Now the syntax itself can be a bit of a pain because it's relatively new meaning it's not is evenly implemented across browsers yet as may be some of the older properties. It has been around and it has been implemented much longer than a lot of the CSS3 properties, so, for the most part you can use it without fear, but so if you go to a site like css3generator.com these site can help you generate the syntax necessary to get the rounded corners that you are looking for.
So if I go down and choose Border Radius, it's asked me if other border is going to be running equally if I say, no I can come in and just plug in the values that I want. And as I start plugging in some of these values you are going to notice something about the code that is generating down below that, it's adding a lot of vendor prefixes both WebKit and Mozilla, essentially older versions of Firefox and older versions of Chrome and older versions of Safari really relied on these particular vendor prefixes in order to apply the property because they were still sort of playing around with the implementation.
So you may want to make sure that those are in your code, if you are going to support older versions of Firefox, Chrome and Safari as well, it won't be too long before we can just drop those vendor prefixes, but I don't know that we are quite there yet. So regardless of which path you take I very strongly recommend testing border radius thoroughly before you use it, since it since it's a relatively new property and occasionally new properties like this will still some changes in how its adopted and implemented within the browsers. So you want to make sure you are testing for that.
Get unlimited access to all courses for just $25/month.Become a member
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.
Your file was successfully uploaded.