Fonts with a box design around it

[Superbird]

I have files in library under the alphabet.

#ABCDEFG... in a webpart to easily find document by title. How can I desgin or use a design that gives that normal look to a better look like a tile or something like that. Please advise. Here is my code below

<div style="padding: 12px; background-color: white; border-radius: 65px; border: solid thin #1E90FF"><center><div class="hometext" ><h2>
           <a  href="/sites/24aftech/cpgreports/Products/Forms/products.aspx">
            #</a><a  href="/sites/24aftech/cpgreports/Products/Forms/products.aspx?FilterProduct=A">
            A</a><a  href="/sites/24aftech/cpgreports/Products/Forms/products.aspx?FilterProduct=B">
            B</a><a  href="/sites/24aftech/cpgreports/Products/Forms/products.aspx?FilterProduct=C">
            C</a><a  href="/sites/24aftech/cpgreports/Products/Forms/products.aspx?FilterProduct=D">
            D</a><a  href="/sites/24aftech/cpgreports/Products/Forms/products.aspx?FilterProduct=E">
            E</a><a  href="/sites/24aftech/cpgreports/Products/Forms/products.aspx?FilterProduct=F">
            F</a><a  href="/sites/24aftech/cpgreports/Products/Forms/products.aspx?FilterProduct=G">
            G</a><a  href="/sites/24aftech/cpgreports/Products/Forms/products.aspx?FilterProduct=H">
            H</a><a  href="/sites/24aftech/cpgreports/Products/Forms/products.aspx?FilterProduct=I">
            I</a><a  href="/sites/24aftech/cpgreports/Products/Forms/products.aspx?FilterProduct=J">
            J</a><a  href="/sites/24aftech/cpgreports/Products/Forms/products.aspx?FilterProduct=K">
            K</a><a  href="/sites/24aftech/cpgreports/Products/Forms/products.aspx?FilterProduct=L">
            L</a><a  href="/sites/24aftech/cpgreports/Products/Forms/products.aspx?FilterProduct=M">
            M</a><a  href="/sites/24aftech/cpgreports/Products/Forms/products.aspx?FilterProduct=N">
            N</a><a  href="/sites/24aftech/cpgreports/Products/Forms/products.aspx?FilterProduct=O">
            O</a><a  href="/sites/24aftech/cpgreports/Products/Forms/products.aspx?FilterProduct=P">
            P</a><a  href="/sites/24aftech/cpgreports/Products/Forms/products.aspx?FilterProduct=Q">
            Q</a><a  href="/sites/24aftech/cpgreports/Products/Forms/products.aspx?FilterProduct=R">
            R</a><a  href="/sites/24aftech/cpgreports/Products/Forms/products.aspx?FilterProduct=S">
            S</a><a  href="/sites/24aftech/cpgreports/Products/Forms/products.aspx?FilterProduct=T">
            T</a><a  href="/sites/24aftech/cpgreports/Products/Forms/products.aspx?FilterProduct=U">
            U</a><a  href="/sites/24aftech/cpgreports/Products/Forms/products.aspx?FilterProduct=V">
            V</a><a  href="/sites/24aftech/cpgreports/Products/Forms/products.aspx?FilterProduct=W">
            W</a><a  href="/sites/24aftech/cpgreports/Products/Forms/products.aspx?FilterProduct=X">
            X</a><a  href="/sites/24aftech/cpgreports/Products/Forms/products.aspx?FilterProduct=Y">
            Y</a><a  href="/sites/24aftech/cpgreports/Products/Forms/products.aspx?FilterProduct=Z">
            Z</a></div></center></div>.

[shaili_shah]

Hii, Good morning.

I have done that.

refer it here : -https://jsfiddle.net/x1q62pnh/

I have just made a class and apply it to every <a> tag using jquery.

Hope you understand it.

Thanks!

Edited August 28, 2020 by shaili_shah