Funky border effect

So, at first I had no idea how to deal with this border effect. I ended up getting the solid border by wrapping the events in a container, putting a blue border-left on that, putting a margin-left on the container and then a negative margin-left on the items inside it. The blue lines don't jam into the avatars because of some white borders on the avatars and more negative margins.

But what about that dotted line?

For that, look at the attachment: http://dribbble.com/shots/1443604-Funky-border-effect/attachments/213001

Basically, I made the link one of our standard links with a pictos icon, then I used some additional styling on the icon to move it to the left, give it a border, and make it white. Boom, funky little border effect.

View all tags
Posted on Feb 28, 2014
Adam Darowski
Director of Design & Product Mgmt at Sports Reference, LLC

More by Adam Darowski

View profile