Nice BlockQuote Design in CSS

HTML element Blockquote has their own unique design by default but that uniqueness is not sufficient most of the time. So, we developers add our own design to that by using image for quote or something else.

Here is nice looking CSS for <BlockQuote> element design:


blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
  overflow:hidden;
}
blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote p {
  display:inline;
}

HTML used for blockquote design:


<blockquote><p>HTML for <BlockQuote> element. <br><cite>http://codepb.com/pure-css-vs-bootstrap/</cite></p>
</blockquote>

How the <BlockQuote> looks like with the CSS:

Blockquote css design

Source: CSS-Tricks
Just remember, if you copy code from CSS-Tricks. There is a minor error on last line. Also cite related code won't be there.

Here are another set of CSS design for <BlockQuote>.