CSS3 Rounded Corner Text Link

Change background of text link to rounded corner

by webcreatorbox

HTML

Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing elit. In dignissim auctor tempus. Sed hendrerit imperdiet est, a consectetur eros laoreet in. Quisque sed magna pulvinar leo posuere placerat ut et nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Maecenas rhoncus congue</a> hendrerit. Aenean varius vestibulum enim, sit amet fermentum ligula volutpat sed. Phasellus eleifend ante non metus vehicula sit amet aliquet neque vehicula. <a href="#">Mauris porta</a>, augue a accumsan pharetra, enim ante vehicula diam, vitae ullamcorper quam diam eu elit.

CSS

*{font-family: sans-serif;}

a{
    color:#fff;
    background: #03c;
    text-decoration:none;
    padding:0 3px;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    transition: 0.5s;
}

a:hover {
    border-radius:30px;
}