Box with rounded corners and and straight bottom border

Button with pseud border

I got a request from a designer to build a button like this with rounded corners (8px radius) and a STRAIGHT gray bottom border. Simply adding a border via bottom-border: 1px solid gray would have yielded a border that curls half way up the corners.

I thought about placing an HR element inside the button, but that wouldn’t match the curvature of the box. I finally decided to exploit the :after pseudo selector to insert my own custom “element”.  I had to set the border size to 3px to get the straight line effect.

.button {
    border: 1px solid #FFFFFF;
    border-radius: 8px;
    float: right;
    font-size: 14px;
    font-weight: bold;
    padding: 14px 0;
    position: relative;
    right: 0;
    text-align: center;
    text-decoration: none;
    width: 178px;
    background: none repeat scroll 0 0 #F6F6F6;
    color: #5D536B;
}
.button:after {
    border-bottom: 3px solid #CECECE;
    border-radius: 8px;
    bottom: -1px;
    content: "";
    height: 6px;
    left: 0;
    position: absolute;
    width: 100%;
}

If that’s too subtle, check it out with a lime border.
button with lime border

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s