#95: A Tale of Border Gradients

Turns out there is a simple way to accomplish gradients on borders. That took me longer than it should have to arrive at though, this screencast covers all the ways I tried and looked at along the way.

Comments

That was fantastic! i honestly never thought we would be able to do that (with CSS alone) and so easily, keep in mind im still learning the advanced stuff, but i did enjoy how you went over all the ways you can approach this, and in the end, showing the PROPER way of doing it. thank you so much chris! saved me a lot of loading time :P (website) take care , cheers.

just a quick question about trying to add IE support into the mix. I’m assuming that the best method would just be a background-image and conditional stylesheet for IE, yes? Depending on what kind of gradient you are trying to accomplish, I guess that you could just add the background image fallback for IE directly into the normal stylesheet since IE would ignore the border-image declarations.

yes thats always technically possible, but its going to be consider hackish, since its using extra markup to accomplish styling.

Generally, combining markup with style is considered bad practice, even though there are still cases where we must resort to those tactics. Its not good practice to have a bunch of empty divs all over the place as it makes your markup/content messier than it needs to be.

Hey… is anyone else having trouble with the video cutting Chris off in mid sentence? I feel like there’s supposed to be more to this video than I’m seeing, mostly because it cuts him off in mid sentence. (I’ve been noticing this a lot actually since the switch from the old video player to Youtube)

I don’t know if it’s something with my browser or what, but I just wanted to call it to someone’s attention if the problem isn’t just localized to me.

Why not just use a container div with the gradient that you would want your border to have, as its background, set the div’s padding to be the desired thickness of your “border” and use a child tag with a solid background… ?

You know Chris, your pseudo code approach you initially showed everyone should take any decent developer the same amount of time to accomplish a gradient border using Nicolas’ version.

Modern browsers will render both appropriately and with speeds so minute, I doubt a humming bird could tell the difference. One guy running with a ring on and another with a bracelet arrive at their destination at the same time. Should we dissect which ‘style’ is more appropriate? Your approach I believe was solid also.

Don’t forget Sid that while you can render certain visual features, you have to consider their level of complexity and time. I don’t think CSS is at the point where adding a gradient border is the most semantic or efficient way. Rather, using imagery which accomplishes the task with less code and effort and no speed drawbacks.

Remember these CSS tricks though amazing are purely experimental and prove that you can pull off tricks but doesn’t mean they are the best method of achieving such results.

Anyone know how you might do a gradient fill with a gradient border using Nicolas Gallagher’s Multiple (Sized) Gradient Backgrounds example? I would like to do this using just one element in my markup, preferably a simple:

<button>Click Here</button

But for the life of me I cannot figure it out as his example is transparent in the middle, and has no fill. Is it possible?

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.