A Jim Dunlop pick built with CSS


As a guitar player, I rely on Jim Dunlop Jazz III picks for a very long time. Jim Dunlop passed away not long ago, and I wanted to give him a tribute, and use border-radius and rotate functionality at the same time, so you can have a better grasp of how they work.

A Jim Dunlop Jazz III Eric Johnson Signature pick

While I use the John Petrucci and the 2.0 series more often, I have a couple of the Eric Johnson models around, and one was just on the top of my desk, so let’s use that.

I laid in an aquamarine background and some HTML.

<div class="background">
  <div class="pick front">
    <p class="text">JIM</p>
    <p class="text">DUNLOP</p>
    <p class="text">U.S.A.</p>
  </div>

   <div class="pick back">
    <p class="text">ERIC</p>
    <p class="text">JOHNSON</p>
    <p class="text">TX</p>
  </div>
</div>

The pick itself is a box. We’re going to need to set up its color and some border radius. I’ve used Montserrat which resembles the font on the pick (Gill Sans may work better though).

The border-radius property is specified as having:

One, two, three, or four or values. This is used to set a single radius for the corners. Followed optionally by ”/” and one, two, three, or four or values. This is used to set an additional radius, so you can have elliptical corners.

Pick halfway complete

The pick as you can see has a unique shape and therefore we need to have elliptical corners set for each corner. You can indeed play with some values, and that’s what I did. We also need to rotate it by 45 degrees in order to align the pick, and the text by -45 degrees.

You also need to set some border so that we get an emboss effect. inset and outset properties are your friend here. What I’ve done is not skeumorphic enough and can definitely be made better. The text on the pick will have some text shadow, so that we’ll have an emboss effect on the text as well.

Pick complete

This is what the end result looks like, we can definitely make some enhancements to font sizes, margins and borders, and the codepen will be live so we can tweak it as much as we like. Play with the border radius and positioning and see how the border radius works there.

Here’s the end product on Codepen.


Cihan Koseoglu

Learn/Think/Implement is a blog about web technologies, mostly on the front-end. Written or curated by