Double top border of which one is centered with a certain width on one element

blockquote, css

Solution

Linear-gradient method

This technique makes use of linear-gradients. Be sure to vendor-prefix it for production.

Here's a fiddle.

blockquote {
  background-image: linear-gradient(to right, rgba(41,137,216,0) 0%,rgba(37,131,210,0) 42%,rgba(37,131,210,1) 42%,rgba(36,129,208,1) 58%,rgba(36,129,208,0) 58%,rgba(32,124,202,0) 99%);
  background-position: top;
  background-size: 100% 8px;
  background-repeat: no-repeat;
}

Background image method

If you would rather have the blue bar fixed width and resizable, you could use a base64-encoded 1 pixel image as the background instead, as per @Joint's suggestion.

Here's a fiddle.

blockquote {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNUabzwHwAEvAJ2QlOyvQAAAABJRU5ErkJggg==);
  background-position: top;
  background-size: 120px 8px;
  background-repeat: no-repeat;
}

You can change the `background-size` to whatever you need it to be.

Problem

I've got a `<blockquote>` which I want to style with a double top border as shown in this image: The tricky part is I want to stick with one element, the `<blockquote>` element, as the HTML will be generated by a WYSIWYG. This is what I've got so far: ``` blockquote background: #fafcfc border-top: 1px solid #dfe7e9 border-bottom: 1px solid #dfe7e9 font-size: 19px font-style: italic font-weight: 300 padding: 45px 40px margin: 35px 0 ``` Keep in mind that I'll probably need `:before` and `:after` for the double quote strings.

Original source