Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I want this border shape with pure css for my website pagination shape I want

share|improve this question
Hello new dev, welcome to GDSE and thanks for your question. I don't want to sound harsh, but what have you tried that didn't work? We kind of expect questions to show a similar amount of investment as a good answer would be. So please share your efforts, and we would be happy to improve on them. – Vincent Jul 29 '14 at 9:17
could you please update your post with that info, so it's a bit more legible? You can click edit to edit your post. Thanks! – Vincent Jul 29 '14 at 18:28
up vote 1 down vote accepted

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;

share|improve this answer
hearty thanks bro..sorry for all mistakes.. – new dev Jul 30 '14 at 10:03

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.