: Border radius CSS for this shape I want this border shape with pure css for my website pagination

@Vandalay110

I didn't hash it out too much, but I'd do it with before and after pseudoclasses. Create a circle before that matches the color of your link's background color, then create a circle after that matches the color of the page background.

div { position: relative; }

a {
width: 150px; height: 100px;
line-height: 100px;
background-color: #ddd ;
display: inline-block;
margin-left: 50px;
position: relative;
z-index: 2;
text-decoration: none;
}

a:before {
content: "";
width: 100px; height: 100px;
background-color: #ddd ;
position: absolute;
top: 0; left: -50px;
border-radius: 9999px;
z-index: -1;
}

a:after {
content: "";
width: 100px; height: 100px;
background-color: #fff ;
position: absolute;
top: 0; right: -50px;
border-radius: 9999px;
z-index: 3;
}

jsfiddle.net/be2ax/

Vote Up Vote Down