CSS In-Depth, v2 CSS In-Depth, v2

Border Radius & Border Image

Check out a free preview of the full CSS In-Depth, v2 course:
The "Border Radius & Border Image" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Estelle illustrates how to set the border-radius for rounded corners and even more styles as well as images as the border of elements and image details.

Get Unlimited Access Now

Transcript from the "Border Radius & Border Image" Lesson

[00:00:02]
>> Estelle Weyl: So let's talk about border-radius. In the upper right hand corner, we have border-radius 0, which is the default. I put two different colors on it so that you could see where the angles are. And when we learned how to make triangles or looked at making triangles yesterday with generated content, that was the power of, we could actually use those angles.

[00:00:24] The thing is, when you're doing border-radius, you start getting kind of funky-looking stuff. Like the border-radius at 20 pixels, and the border-radius at 50 pixels, it's just a little bit weird. So do not prefix border radius. I see moz-border-radius in so many different things, and I think it's been supported since Firefox 3.6?

[00:00:48] Who's here's still supporting Firefox 3.6? Right, so why do I see moz-border-radius all over the place? We also don't wanna use webkit border-radius, cuz even though Android 2.3 still needs it, it slows the device down. So a person's already on a crappy device, and you're just making their life worse, so don't ever prefix this.

[00:01:13] And I believe, last year on the SAS homepage, where it was showing you how to use functions, it actually expanded using moz-border-radius, and I'm kinda like, please get. So when you're using pre-processors or post-processors, make sure you're not adding cruft when you don't need it. Okay, so to make a circle, you need to have an element that has the same height and width, otherwise, it's going to be an ellipse.

[00:01:39] But if you wanna make an ellipse or a circle, and a circle is a type of ellipse, just use border-radius 50%. If you put two values, it's different than putting two values with a slash. So in the third example, we have border-radius 10 pixels, 30 pixels. Which means the upper left-hand corner and the bottom right-hand corner have a border-radius of 10 pixels.

[00:02:05] And the upper right-hand corner and the lower left-hand corner have a radius of 30 pixels. Which is much prettier than the thing we're doing next, which is 10px / 30px. That's basically saying, horizontally make the border radius 30 pixels and vertically make it 10 pixels, or the other way round.

[00:02:33] And then we can do really ugly stuff, cuz we can put all four values. The bottom one, that's ugly, it's called uglification, and it's something we're learning a lot about today, that's how to make an ugly thing on the web. So that's saying basically, the upper left-hand is 10 pixels by 30 pixels, the upper right is 35 by 35.

[00:03:03] The bottom right is 20 by 5, and the bottom left is 15 by 5. That's just ugly, but you can do that, so just realize that that's what border-radius is doing. So let's just play with border-radius for 45 seconds, try to make this as ugly as possible. Another thing to note on this, as you're making this ugly is, you see, the original corner would have been here.

[00:03:28] And that's where this is going, it's going to that mark right there. So it's actually cutting off, it's on the bottom edge.
>> Estelle Weyl: Because your border-radius will curve in, but your colors will stay angled.
>> Estelle Weyl: And if you just get rid of the slash, that's actually not ugly anymore.

[00:03:51]
>> Estelle Weyl: So realize that the slash is in the syntax. And now that you know it, let's see if we even use it anywhere.
>> Estelle Weyl: No, all the examples with slashes are ugly.
>> Estelle Weyl: And the thing is, if you're going to use the shorthand or the longhand of a border,

[00:04:21]
>> Estelle Weyl: Or is it top-left-radius, top-right, yeah. So if I wanna make this ugly, I actually just do 40%, or 20%, right, that's ugly. But when I have two different values, so a different value for vertical and horizontal, so the vertical is 20 pixels and the horizontal is 50%, there's no slash.

[00:04:49] So there's only slash in the longhand, not in the shorthand.
>> Estelle Weyl: Okay, let's go on to border images, so what is a border image?
>> Estelle Weyl: Or how is it supported?
>> Estelle Weyl: Considering it's been around, let's just show you how long it's been around, and it's still prefixed,
>> Estelle Weyl: It's not even looking like it's gonna lose its prefix anytime soon.

[00:05:26]
>> Estelle Weyl: Okay, so let me just reload this page. Okay, so the border-image the underlying properties are the border-image-source, the slice, the width, the outset, and the repeat. And that's for the, border-image is actually the shorthand. Okay, so unlike background-image, which is a longhand property, border-image is a shorthand property.

[00:06:00]
>> Estelle Weyl: For it to work, you actually have to have a border, cuz you have to have that width of that border to say how wide you want your image to be.
>> Estelle Weyl: Here I have a really ugly image.
>> Estelle Weyl: And I'm stretching it, and I'm repeating it, and I'm rounding it.

[00:06:36]
>> Estelle Weyl: And I think repeat or stretch will look the best. Okay, that looks good, so I have a background image that looks like a tiny version of this. So why would I wanna use border-image? Because I might want to use this image 150,000 different sizes, but I always want those corners to be the exact same.

[00:06:57] And then I like it to stretch in between. So that would be a use case of not making 150 different sizes of this image. I could also just put background-cover, right, but if I take it and I make it background-cover and I have something that's 500 pixels wide, those corners on the edge are gonna stretch, and I don't want that.

[00:07:21] So that would be a use case for border-image. So here I'm stretching it cuz it's a gradient and I want it to look tall. If I repeated it in the middle, I'm repeating that gradient, and that doesn't look good.
>> Estelle Weyl: If I was doing a stamp, if I had a picture of a stamp, all I would have to do is do one repetition of the stamp.

[00:07:44] And then I could actually make that stamp repeat 100 times. Cuz you know how stamps go, they have a straight edge, or they used to be, before they were stickers. Now I think they're just rectangular, I'm not sure. Okay, so I have these properties, basically the border-image-source is the first one I declare, which is the gradient image that I used.

[00:08:05] The border-image-slice is up to four values. And I'm gonna show you in the next picture a little bit better how it's explained. And then I have a border-image-width, which is going to be basically the same size as the width of my border.
>> Estelle Weyl: And then I repeat it, round it, or stretch it, and I can't remember what the outset is.

[00:08:28] Cuz I didn't use it, I don't think I need it.
>> Estelle Weyl: Yeah, I didn't use it. Okay, so here we have a very long cat.
>> Speaker 2: [LAUGH]
>> Estelle Weyl: Right there is basically what the border is. You see the border width is 48 by 137 by 68 by 84.

[00:08:53] And in my border image, I repeat that as 48 137 68 84 without the pixel units. Then I can use the property of fill to fill it or not fill it, and my cat looks better filled.
>> Estelle Weyl: And then I stretch it because if I repeat,
>> Estelle Weyl: It looks really weird,

[00:09:27]
>> Estelle Weyl: So I stretch it. So what I'd like you to do is just take two minutes to change the border sizes to play with basically both these screens.
>> Estelle Weyl: So you have a little bit of an understanding, this is actually the produced syntax right here. So you can switch these, and the URL is gradient.

[00:09:50] So let's see if I can find, while you do that, I'm gonna find the URL of this image.
>> Estelle Weyl: So you see, I used the style here, right here, and I told you yesterday to not use style. The reason I'm doing that is because I'm actually doing sliders, and I'm dynamically reloading the page, so it's my JavaScript that's doing it.

[00:10:20] I would not do this in production, but this is an example just to show you how to do this. There's so much bad and evil code, I'd say it's embarrassing, but I don't get embarrassed. So this the original image that we stretched, okay, so that's what you're stretching.

[00:10:38] What you wanna do is, you wanna repeat this inner part, but you wanna maintain these little corners on the outside. So how big does your gradient have to be? So let's actually go over here, whoops, and change this from longcat. If you want to, you don't have to, and do that.

[00:11:09]
>> Estelle Weyl: So now I just have the four corners. Except for I really wanna have about 10px by 10px by 10px by 10px, is that enough, yeah.
>> Estelle Weyl: And then my old syntax, cuz I have to look at things, cuz I don't know this by heart,
>> Estelle Weyl: Is,
>> Estelle Weyl: No, stretch,

[00:11:50]
>> Estelle Weyl: And okay, so let's just copy this over here.
>> Estelle Weyl: I'm going to hit Return over here cuz you can actually have things that are two lines long, and just do this. So why does it not have the stuff in the middle? Because I need to fill it.

[00:12:20]
>> Estelle Weyl: And where do I put the fill?
>> Estelle Weyl: Try to remember.
>> Speaker 3: After the image URL.
>> Estelle Weyl: There we go, and let me do 30.
>> Estelle Weyl: 30, I hope you're playing along, cuz I don't have to come all the way to Minnesota to play with this, I can do this at home.

[00:12:55]
>> Speaker 2: [LAUGH]
>> Estelle Weyl: Okay, and width,
>> Estelle Weyl: 60px.
>> Estelle Weyl: Height,
>> Estelle Weyl: 80px.
>> Estelle Weyl: Box-sizing.
>> Estelle Weyl: Okay, so now it's 60 pixels by 80 pixels, why don't we make the width 160,
>> Estelle Weyl: 40, and then just do 20, 20, 20, 20. So you see how I can make that image, and no matter what size I make it, it still looks ugly?

[00:13:50] I mean, no matter what size I make it, it still looks like it was the original image of the button. It doesn't look like I completely played around with that and stretched it. So that's border-image, one last thing I want to cover on border-image, which I didn't cover before, is how the border-image is placed.

[00:14:10] Basically, when you were defining the widths of the borders, you were defining what was on the left, what was on the top, what was on the right, and what was on the bottom. And then you're replacing or slicing the background, that border-image, into nine parts. The upper right-hand part was put in the upper right-hand corner.

[00:14:32] The upper left-hand part was put in the upper left-hand corner. The bottom right-hand part was put in the bottom right-hand corner. And the bottom left-hand part was put in the bottom left-hand corner. And then the rest of it was stretched or repeated, so this is kind of like an image to indicate what was going on.

[00:14:49] You're placing the four corners, so when you have a background image, you kind of need to know what areas. You wanna maintain the exact correct aspect ratio, and then what part you either wanna repeat or you wanna stretch.