FREELessons: 10Length: 34 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.7 Transparent Borders

In this tutorial, you’ll learn how to use the background-clip property to make an element’s border semi-transparent.

Relevant Links

2.7 Transparent Borders

Hello, and welcome back. In this lesson we're gonna take a look at how to create transparent borders in CSS, and as always you can open up the starting pen here by taking a look at the URL in your course notes for this lesson. Once you open that up, click on FORT, and we'll start with our new copy. In this new copy, you'll see that we have a div with a class of container and inside that we just have an h2 and a couple of paragraphs. The image in the background is simply placed on the body of the document. And what I wanna do, is I wanna add a border around the edge of our container and I want that border to be semi-transparent. And we can do that using an RGBA color but, we'll discover that there;s actually another step after that. So, let's go into our container rule here and let's create our border. And for now just for the sake of seeing what's going on here, I'm gonna make it a red border. We're gonna change that eventually, but for now, we're gonna make it red. I'm gonna make it 10 pixels solid red, and so that's what a red border is going to look like if it's solid. But again, I want it to be semi-transparent, so instead of just using a name value, like this, or a hex value, we need to use an RGBA value. So with RGBA, the value for red is 255,0,0, and then our opacity, so let's set that to 0.05. Now we can see right away that this isn't red. It's not that same dark red that we saw before. It's almost kind of a pink color and so we know that it is semi transparent because it is pink instead of red. If we were to change this opacity value to 1, which means it's fully opaque and we can't see through it then we that it's red. But if we change that again to 0.5 then we can kind of see through it to the white background behind it. And that's the problem. The problem is that white background for our container. Well, there's a property in CSS that you don't find using very often, and it's called background clip. So we're gonna go to the next line, and we're gonna call on the background-clip property and we're gonna give it a value of padding-box. When we do that, you'll see it clips away the white background where our border is. And when we do that we can see right through it to the image behind it. So now we can change it from red to white. And we have a much more pleasant looking border around the edges. So that's how you create a semi-transparent border using CSS. Thank you for watching and I'll see you in the next lesson.

Back to the top