Space between border radius example

Write code here

J | B | A

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        ul.pagination {
            display: inline-block;
            padding: 0;
            margin: 0;
        }

ul.pagination li {
                display: inline;
            }

ul.pagination li a {
                    color: black;
                    float: left;
                    margin:0 5px;
                    padding: 8px 16px;
                    text-decoration: none;
                    transition: background-color .3s;
                    border: 1px solid orange;
                }

.pagination li:first-child a {
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;
        }

.pagination li:last-child a {
            border-top-right-radius: 15px;
            border-bottom-right-radius: 15px;
        }

ul.pagination li a.active {
            background-color: green;
            color: white;
            border: 1px solid red;
        }

ul.pagination li a:hover:not(.active) {
            background-color: pink;
        }
    </style>
</head>
<body>

<h2>Space between Rounded Borders</h2>
    <ul class="pagination">
        <li><a href="#">«</a></li>
        <li><a href="#">TechFunda</a></li>
        <li><a class="active" href="#">2</a></li>
        <li><a href="#">ITFunda</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">DotNetFunda</a></li>
        <li><a href="#">6</a></li>
        <li><a href="#">KidsFunda</a></li>
        <li><a href="#">»</a></li>
    </ul>

</body>
</html>

Note: We DO NOT save your trial code in our database.

Space Between Border Radius

Write code here

Output