How to style your blockquote - Style 5

Demo:

This is the live preview of blockquote style 2. Please hover this blockquote to see the hover effect. To use blockquote, highlight the text and click . To have this kind of blockquote in your blog, simply follow the instruction below.

1. Blogskins/ Classic template : Paste the codes giver before/above </style>

2. Template designer : Paste codes given before/above ]]></b:skin> 

blockquote{ background:#fff; padding:20px; color:#808080; border-top:5px solid #ffd5d5; border-bottom:1px solid #FF8D8D; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; margin-top:10px; margin-bottom:10px; } blockquote:hover{ border-top:1px solid #ffd5d5; border-bottom:5px solid #FF8D8D; }