My goal is to make a variable number pagination links with border radius so it looks all nice. It should also, under small screen, take the whole width of the screen and links must be evenly spaced and without margin.
But then,
.pagination{
display:table;
font-size:0.1px;
border-collapse:collapse;
}
.pagination a{
background-color:#8bf;
display:table-cell;
font-size:1rem;
border:1px solid #48f;
min-width:3rem;
height:2rem;
vertical-align:middle;
text-align:center;
}
.pagination a:first-child{
border-top-left-radius:1rem;
border-bottom-left-radius:1rem;
}
.pagination a:last-child{
border-top-right-radius:1rem;
border-bottom-right-radius:1rem;
}
@media(max-width:470px){
.pagination{
width:100%;
}
}
Will square the borders while still rounding the background.
Furthermore, there is a margin between links that can't be taken out. [Edit: That was taken out]
I cannot have a specified width for the links their number vary between 1 and 4.
Ok...although it's not clear to me precisely what the question is you are asking, I think it's related to the border.
You can still use the border-radius property for rounding and substitute a box-shadow for the border.
I've exaggerated it in this example
.pagination a{
background-color:#8bf;
display:table-cell;
font-size:1rem;
//border:1px solid #48f; /* remove this*/
min-width:3rem;
height:2rem;
vertical-align:middle;
text-align:center;
box-shadow:0 0 4px 0 red; /* add this...or variant */
}
Frankly, I think you would find it easier to structure this as a ul/li/a list rather than just as a series of links in a paragraph.