In my previous segment, I showed you examples of creating the stitched effect with the CSS3 dashed border property and some background images. This time, I will demonstrate the same kind of effect (see the Memoir WordPress theme from Elegant Themes in Figure A), but here I will attempt to do it using only CSS3 styling properties to approximate  the same effect as the Memoir example.
In order to re-create the curves of the Memoir theme, I first found some inspiration from Juixe Techknow and the “Rounded Corners with CSS border-radius Property” post, which demonstrates creating a clover leaf effect using border-radius as shown in the screen capture in Figure B below:

I took inspiration from the clover leaf demonstration and modified the border radius settings so that it would match the same visual effect as that of the Memoir sidebar background images. First I started with some HTML5 code by creating four <aside > elements, as each will represent one quadrant of the new sidebar (remember the cloverleaf above), and each <aside> element will be designated by its location within the four quadrant “grid” and in the id order of “top_left”, “top_right”, “bottom_left”, and “bottom_right”, as shown in the HTML snippet below.

<aside id="top_left"></aside>
<aside id="top_right"></aside>
 <br style="clear:both" />
<aside id="bottom_left"></aside>
<aside id="bottom_right"></aside>

Notice the “clear:both” break positioned between the top and bottom <aside> elements; this pushes the bottom two <aside> elements below the top two. I will show CSS3 styles in just a bit, but first we need to establish some form to the sidebar, so I will add in a “sidebar” class, adding in a width of 85px, a height of 200px with a left float, and then a border-radius of 5px with a box-shadow. The CSS3 code snippet for the .sidebar class and the quadrant ids is displayed below:

.sidebar{
    width: 85px;
    height: 200px;
    float:left;
    border-radius: 5px;
    -webkit-box-shadow: 0px 1px 10px rgba(52,52,52,0.5);
    -moz-box-shadow: 0px 1px 10px rgba(52,52,52,0.5);
    box-shadow: 0px 1px 10px rgba(52,52,52,0.5);
}
#top_left {
       border-top: .1em dashed  #747474;
       border-left: .1em  dashed  #747474;
       border-radius: 0px 20px 0px 0px;
       -webkit-box-shadow: -4px -4px 2px rgba(28, 28, 28, 1);
       -moz-box-shadow: -4px -4px 2px rgba(28, 28, 28, 1);
       box-shadow: -4px -4px 2px rgba(28, 28, 28, 1);
}
#top_right {
       border-top: .1em  dashed  #747474;
       border-right: .1em dashed  #747474;
       border-radius: 20px 0px 0px 0px;
       -webkit-box-shadow: 4px -4px 2px rgba(28, 28, 28, 1);
       -moz-box-shadow: 4px -4px 2px rgba(28, 28, 28, 1);
       box-shadow: 4px -4px 2px rgba(28, 28, 28, 1);;
}
#bottom_left {
       border-left: .1em  dashed  #747474;
       border-bottom: .1em dashed  #747474;
       border-radius: 0px 0px 20px 0px;
       -webkit-box-shadow: -4px 4px 2px rgba(28, 28, 28, 1);
       -moz-box-shadow: -4px 4px 2px rgba(28, 28, 28, 1);
       box-shadow: -4px 4px 2px rgba(28, 28, 28, 1);
       margin-top: -.64em;
}
#bottom_right {
       border-right: .1em  dashed  #747474;
       border-bottom: .1em  dashed  #747474;
       border-radius: 0px 0px 0px 20px;
       -webkit-box-shadow: 4px 4px 2px rgba(28, 28, 28, 1);
       -moz-box-shadow: 4px 4px 2px rgba(28, 28, 28, 1);
       box-shadow: 4px 4px 2px rgba(28, 28, 28, 1);
       margin-top: -.64em;
}

Notice the border-radius and box-shadow for each of the quadrants: did you observe that each is specific to its location on the quadrant? For example, the #top_left id has a border-radius set to 20px for the top right corner only with the property setting of border-radius: 0px 20px 0px 0px;, and the #top_right id has a border-radius set to 20px for the top left corner only with the property setting of border-radius: 20px 0px 0px 0px;. The bottom left and bottom right property styles continue in the same manner, with each 20px border-radius to create the desired effect.

Each quadrant selector id has its own border styling as well, for example, #top_left has the following border-top: .1em dashed #747474; and border-left: .1em dashed #747474;, and so on. Also notice that each quadrant selector id has a box-shadow of its own, again, each property setting appropriately configured to recreate the effect depending on its position within the “grid”.

Also, did you notice the margin-top: -.64em; property for both the bottom selectors? These are set to compensate for the 4px box-shadow that ends up creating a separation between the top and bottom quadrants. Just comment out the two margin top properties and refresh your browser to view the effect.

If you go back up to the top and notice the screen capture of the Memoir sidebar you will see that the left side and right side have two shades of gray; to get this to show up we need to add a left and right class with color properties to represent each background color; the code snippet for this is shown below:

.left {
    background: #282828;
}
.right {
       background: #2e2e2e;
}

So, next we need to add in the calls for the classes into each of the <aside> elements, the HTML now looks like this code snippet:

<aside class="sidebar left" id="top_left"></aside>
<aside class="sidebar right" id="top_right"></aside>
  <br style="clear:both" />
<aside class='sidebar left' id="bottom_left"></aside>
<aside class='sidebar right' id="bottom_right"></aside>

And our sidebar output as displayed in Chrome 21.01 is shown in Figure C below:

But wait, we are not finished! How about we add some content inside the sidebar, such as a heading and some linking? We will create a <section> element with a class equals .content. We apply a width of 170px with a float left, a z-index of 10 with an absolute position, and a top margin of 30px, along with adding in some font and header styling as well. Then to make the linking a bit fancy, we will add in some properties for the anchor, with hover and active styling as well. The combination of the z-index set to 10 and the absolute position for the content container properties effectively allows the aforementioned content to layer on top of the four quadrant <aside> containers. The CSS code snippet is shown below:

.content {
       font-family: Georgia, "Times New Roman", Times, serif;
       font-size: 1.1em;
       margin-top: 30px;
       text-align: center;
       text-shadow: 1px 1px -1px #BABABA;
       line-height:1em;
       z-index: 10;
       width: 170px;
       float: left;
       color: #7c7c7c;
       position: absolute;
}
.content h2 {
       font-family: Georgia, "Times New Roman", Times, serif;
       color: #ffffff;
       font-size: 17px;
       text-transform: uppercase;
       text-align: center;
       padding-bottom: 14px;
       text-shadow: 1px 1px 1px #A1A1A1;
}
.content a {
       text-decoration: none;
       font-family: Georgia, "Times New Roman", Times, serif;
       font-size: 1em;
       color: #316baa;
}
.content a:hover {
       color: #E5E5E5;
}
.content a:active{
       color:#069;
}
And the HTML code snippet:
    <section class="content">
        <h2>Sidebar Title</h2>
        <p><a href="#">Sample Link 1</a></p>
        <p><a href="#">Sample Link 2</a></p>
        <p><a href="#">Sample Link 3</a></p>
        <p><a href="#">Sample Link 4</a></p>
        <p><a href="#">Sample Link 5</a></p>
        <p><a href="#">Sample Link 6</a></p>
    </section>

Note that the anchors are referencing dummy links (href=”#“). Here is our sidebar output as seen in Chrome 21.0.1:

Figure D

Of course, you can style your own headers, typography, and link effects to anything you wish, however, this demonstration is a very close reproduction of the original layered images which were previously accomplished with image files; my only gripe is that the stitched effect does not fully wrap around the border radius areas as nicely or as identically as the images from the Memoir theme. The dashed stitching fades into the radius as it approaches the end of the curve. However, I hope this gives you a good example of how certain effects can be created by using a variety of different methods.

According to the W3C Candidate Recommendation for CSS Backgrounds and Borders Module Level 3 border styles, it notes that “There is no control over the spacing of the dots and dashes, nor over the length of the dashes. Implementations are encouraged to choose a spacing that makes the corners symmetrical. This specification does not define how borders of different styles should be joined in the corner. Also note that rounded corners may cause the corners and the contents to overlap, if the padding is less than the radius of the corner.”

One possibility would be adding another nested container such as a <div> or <aside> inside each quadrant <aside>, or creating an image of a dash and try that out as a border image. If anyone has a suggestion for a tweak to get the stitching to complete the full radius curve, I would love to hear from you in the comments!

The HTML and CSS files utilized in this demonstration are available for download.