This is really something I need to learn.
In a recent web-dev project, a design required scooped corners on some images.
In case someone walks down this path again, I thought I’d write about what methods I researched and how I arrived at my chosen solution.
The target effect was an image with scooped corners and a uniform border, something like this:
The main restrictions in my case were:
- These images were added through a WYSIWYG. All I could apply to the
imgtag from the backend was a class. The rest had to be done in the frontend.
- IE 10+ support is required, and IE9+ support is preferred.
With those stipulations, lets look at some solutions!
Method 1: Mad gradient hax
The first method I found is arguably the most popular (according to Google, anyway).
Lea Verou uses four CSS gradients to replicate each beveled corner individually, with the gradients going immediately from full colour to transparent in one stop to give a hard edge to the shape.
This method doesn’t work for me however because gradient backgrounds don’t really work on images.
Method 2: Instead of images, use… Images?
One of the obvious approaches to custom borders is to use
border-image, as done by this fiddle (apologies to the creator as I can’t find a source).
The restrictions on border width and inflexibility in border colour don’t work well for my case, however.
Method 3: Needs more jQuery
There is, as always, the
Nuclear jQuery option.
jQuery Corners has been around for some time and while it does have great browser support, the limitations on border size and the bloat associated with this approach (extra JS plugin + a lot of extra markup) make it unworkable for me.
Here is a codepen demonstrating the issues this method presents (you may need to explicitly load non-HTTPS scripts in your browser):
Method 4: Mad gradient hax part duex
Lea Verou has also made a second take on using gradients for an inset border effect.
This method uses a pseudo element to apply the gradient on top of the element instead of it being used in the background of the element (The gradient wrapping shown in this demo is super cool and I didn’t know that CSS gradients worked in this way).
While this method does get pretty close to achieving my goals, if does fall short. I can live with a wrapper element to get this to work on images (which don’t support pseudo elements), but the mediocre browser support (no support on IE9 and icky aliasing on Chrome) and not being able to apply a uniform border to the entire element mean it won’t work for me.
Here is a codepen demonstrating the issues this method presents:
Method 5: A :psuedo solution
The most promising solution is a relatively simple one coming from Mike Behnke. His method is somewhat similar to the previous method except it uses four separate pseudo elements with
This method checks all the boxes for me. Pretty good browser support, flexible and uniform border options, and a nice smooth corner (even on Chrome) make it almost the ideal solution.
The major issue, however, is the extra wrapper tags needed to make this method work.
A Happy Medium
In order to use Mike Behnke’s solution I need to overcome the hard restriction of only a single
img tag being sent down to the pipe.
While I would have liked to avoid using JS at all to achieve this effect, a little dash of jQuery (
.wrap(), to be precise) made this a much easier process.
Here is a demo of the solution I used for the project:
A Final Solution?
This little journey has been fun and all, but I would have much rather just use something like the proposed
corner-shape. Lea Verou has been championing this proposed property and has made a good demonstration of how
corner-shape would work.
I for one would love to see this property become standard but unfortunately it seems progress on it has stalled.
Have any thoughts or corrections? Let me know!
Here’s a demo of a button style I’ve been playing with lately.
I could perhaps be done in an easier way, but I’m using four CSS gradients in the background to simulate four bevelled corners.
This method definitely has its downsides (doesn’t really support transitions and is a bit jaggy in chrome) it could be useful for certain styles.
Wish I could find more info on this image but unfortunately Google is failing me on this one.
Such an interesting image, and I find this happening to so many people.
I guess this is an effect of only out of the ordinary stuff being on the news. If you have no frame of reference for a news story about a certain group or culture, it’s easy to let your assumptions be coloured by only hearing negative stories.
As you may have noticed, this blog has been very quiet for a few weeks. Too quiet, some might say.
I thought that I should write a second notice to append my first notice on this blog being so silent.
In short, I stopped having fun with it.
I got too caught up with having a schedule and organizing posts and making sure that I had spaced out content every week and so on. It slowly became more and more work and suddenly I had noticed that I wasn’t enjoying it anymore.
So, I’ve stopped clinging to any semblance of routine and have decided to only post links when I’m really interested in them/have something to say, and spend some more time on (slightly) longer form stuff and other side projects.
No promises, but we’ll see what comes in the new year.
Apologies for the recent prolonged silence, I’m afraid I have no better excuses than the weight of life and the strength of momentum (which are pretty poor excuses). I will try to resume posting soon.