Making rounded corners in CSS

Kathleen Farley
A free video tutorial from Kathleen Farley
aka Robobunnyattack! + co-founder of Audiohackr
4.5 instructor rating • 9 courses • 16,560 students

Lecture description

How do you make rounded corners using CSS? In this lesson, you'll learn:

  • How to think about rounded corners as being 1/4 of a circle
  • How to control the size of rounded corners using CSS

By the end of this lesson you'll know how to code:

  1. The BORDER-RADIUS attribute (in CSS, to create rounded corners)

Learn more from the full course

Step-by-step HTML and CSS for Absolute Beginners

Learn how to code HTML5 + CSS3 to create your own website in this beginner-level course. No coding experience required!

03:58:04 of on-demand video • Updated August 2016

  • In this course, we'll create a simple "Coming Soon" webpage using valid HTML5 and CSS3 code
  • We'll focus on WHY the code we write looks the way it does –– so you can develop an intuitive understanding of how HTML and CSS work
  • By the end of this course, you'll be able to use HTML and CSS with confidence, following best practices every step of the way!
English [Auto] How to make rounded corners in CSX. Here's an example of what I mean. See the corner of this div box right here. I've got a rounded edge. Same thing right here. How do I do that. It's actually really simple. This is the page that we're working on and see right here we don't have rounded corners. Let's have a look at our our CSSA code and see what we've got here. I'm going to apply this to all the divs on my page. OK you don't have to. You could specify a specific device but in this case I want I've decided that I want all the divs on my page. I want them to have rounded corners. It's actually really easy to do. The attribute that we use is border radius and you might be asking yourself why the word radius. I think of it this way I think a quarter rounded edge is really just one quarter of a circle. When you think about it right and the radius refers to the distance if you if you were sort of pretend that this is an entire circle. OK I wish I could actually draw that out a bit more for you but pretend here if I click on it you'll see that it creates a circle. Pretend that this is a full circle and the radius refers to the distance between this imaginary center point on the circle to the edge OK. And so that means that the value that we put in here is going to be in number. It's going to be a numbered pixels and I'm going to start with I'm going to try 10 pixels and what that means is that I save that it should create around and around it edge that is that approximates or is equivalent to if I if I drew sort of a center period like a centered dot right here and I measured the distance between that and the edge it should be 10 pixels and if that doesn't make sense yet don't worry. It should make sense in a moment. This is the page that we're working on. I've just change I've just added the border radius 10 pixels here to my device and my CSSA page let's hit reload. And now you see my edges are all rounded. And notice it also around the edges to the footer down here. It doesn't really matter because we're not you know we didn't change the background color but in this case it did. Now what happens if we actually change the value of this. Here's a little question for you if I were to change that to say 40. OK. And if I were to apply that. Do you think that the rounded edge what would happen to the rounded edge. Well let's think about this OK. If the the border radius value is 40 pixels then that means that because remember that number refers to this imaginary distance between the. You know if we were to draw this imaginary circle the distance between the center of the circle and the edge of the line. So if the distance between the radius and the distance between the center of the circle and the edge the border is 40 pixels then it's a circle bigger or smaller the circle would be bigger. Right. Yeah. That that makes sense it means that the radius would be 40 pixels which is four times as big as this. And so if the circle is bigger would you expect the corner to be kind of rounder or to be sharper. It would be rounder right. Because we're talking about a much bigger circle. So let's hit reload and see what happens. See that's exactly what happened to see this imaginary circle now is a lot bigger and to reflect the fact that the distance between the center and the edge is larger. Now isn't that neat. I think it's kind of neat but I said to geek out about things like that so you know your mileage may vary. Let's switch this back to what we had originally 10 pixels it's it's safe and let's reload. This is very very similar to what we have here in fact we are so darn close. It's amazing how bright the end is in sight. Thank you for watching. I hope that you found that helpful. I'll see you next time.