CODEWITHSUNDEEP
htmlcss
Megasort
Megasort

Reputation: 11

There is a list, the first, and last element have rounded edges with nth-last-child and nth-first-child

a{
    border-radius: 0;
}
a:first-child a{
    border-radius: 10px 10px 0 0;
}
a:last-child a{
    border-radius: 0 0 10px 10px ;
}

img1:
img1 img2:
img2

Moreover, all elements between them are without rounding. The fact is that the number of these elements is always different, from one to infinity. Question! How to round all edges with CSS if there is only one element?

Upvotes: 1

Views: 41

Answers (1)

thehuijb
thehuijb

Reputation: 239

I think this would work for your example:

a{
    border-radius: 0;
}
a:first-child a{
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
a:last-child a{
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

Upvotes: 1

Related Questions