Display Pager Buttons with Rounded corners using CSS in ASP.Net

Last Reply one year ago By nadeem1218

Posted one year ago


I was developing an E-Commerce cart using Asp.Net. I have a listview and I need to implement custom paging on this.

I have acheived the listview design but I'm not sure how to design the paging as shown below.Any suggestions please.






You are viewing reply posted by: nadeem1218 one year ago.
Posted one year ago

Hi Mudassar,

After a lot of effort, I have acheived the rounded background for listview paging. Below is my css. I think it may help someone.


* Rounded CSS paging for Listview*/
.circle, #ContentPlaceHolder1_LviewBasket_DataPager1 span, #ContentPlaceHolder1_LviewBasket_DataPager1 a {
    width: 20px;
    height: 20px;
    background-color: #fff;
    -moz-border-radius: 70px;
    -webkit-border-radius: 70px;
    border-radius: 70px;
    border: 1px solid #ccc;

.circle:active {
    border:  1px solid red;

#ContentPlaceHolder1_LviewBasket_DataPager1 span, #ContentPlaceHolder1_LviewBasket_DataPager1 a {    
    padding: 7px 12px;    
    height: 20px;
    border-radius: 70px;   
#ContentPlaceHolder1_LviewBasket_DataPager1 span {

And the HTML


asp:DataPager ID="DataPager1" runat="server" PagedControlID="LviewBasket" PageSize="1">
<asp:NextPreviousPagerField ButtonType="Button" PreviousPageText="<<" ButtonCssClass="circle"
ShowFirstPageButton="true" FirstPageText="|<" ShowPreviousPageButton="true"
ShowNextPageButton="false" />
<asp:NumericPagerField ButtonType="Link" />
<asp:NextPreviousPagerField ButtonType="Button" ShowNextPageButton="true" NextPageText=">>" ShowLastPageButton="true" LastPageText=">|"
 ButtonCssClass="circle" ShowPreviousPageButton = "false" />

Thanks for your suggestions.