1px highlight top border in addition to full border?

BumBafsaips

New Member
I've tried googling this problem multiple times, but surprisingly don't find any results.I'm trying to create a button that has a 1px dark border all the way around, but then also a 1px highlight border-top on the inside.
CddRU.png
This image is a sample of what I'm trying to achieve. Is there any way to do this with just CSS3/HTML?Current HTML:\[code\]<a href="http://stackoverflow.com/questions/15489471/register" title="Register Now" class="blue_button">Register Now</a>\[/code\]Current CSS:\[code\].blue_button { background-color: #019df6; background: -moz-linear-gradient(top, #019df6 0%, #027bc1 99%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#019df6), color-stop(99%,#027bc1)); background: -webkit-linear-gradient(top, #019df6 0%,#027bc1 99%); background: -o-linear-gradient(top, #019df6 0%,#027bc1 99%); background: -ms-linear-gradient(top, #019df6 0%,#027bc1 99%); background: linear-gradient(to bottom, #019df6 0%,#027bc1 99%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#019df6', endColorstr='#027bc1',GradientType=0 ); border:1px solid #0171b1; padding:10px 30px; font-weight:600; font-size:150%; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color:#fff; text-decoration:none;}\[/code\]
 
Back
Top