Home/ Questions/Q 8578833
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T20:29:00+00:00

In a navigation design I need to give border like this. I know how

  • 0

In a navigation design I need to give border like this. I know how to create double border but don’t how to create border which has some gap on top and bottom.

enter image description here

I know it can be done using an images but curious to know if it’s possible to make in CSS only

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Yes, it can easily be done using just CSS.

    demo

    HTML:

    <ul class='navigation'>
    <li><a href='#'>nav item</a></li>
    <!-- as many navigation items as you would like -->
    <li><a href='#'>nav item</a></li>
</ul>

    Relevant CSS:

    .navigation { padding: 0; list-style: none; }
.navigation li {
    float: left;
    padding: .35em 0;
    border-top: solid 2px #e4e4e3;
    border-bottom: solid 3px #94a10f;
    background: linear-gradient(#fafafa, #e5e5e5);
}
.navigation a {
    display: block;
    padding: .5em;
    border-left: solid 1px #fff;
    border-right: solid 1px #a4a4e3;
    color: #000;
    text-decoration: none;
}
.navigation li:first-child a { border-left: none; }
.navigation li:last-child a { border-right: none; }

    Alternatively, if you don’t want to have a non-clickable area at the top and bottom, you could try it the other way:

    demo

    CSS:

    .navigation {
    display: inline-block;
    overflow: hidden;
    padding: .35em 0;
    border-top: solid 2px #e4e4e3;
    border-bottom: solid 3px #94a10f;
    background: linear-gradient(#fafafa, #e5e5e5);
    list-style: none;
}
.navigation li {
    float: left;
    border-left: solid 1px #fff;
    border-right: solid 1px #a4a4e3;
}
.navigation a {
    display: block;
    padding: .5em;
    margin: -.35em 0;
    color: #000;
    text-decoration: none;
}
.navigation li:first-child { border-left: none; }
.navigation li:last-child { border-right: none; }

    A third way to do this, also extending the clickable area to the borders as well would be to use pseudo-elements on the links to get the lateral borders.

    demo

    CSS:

    .navigation { margin-top: 7em; list-style: none; }
.navigation li {
    float: left;
    background: linear-gradient(#fafafa, #e5e5e5);
}
.navigation a {
    display: block;
    position: relative;
    padding: .85em;
    border-top: solid 2px #e4e4e3;
    border-bottom: solid 3px #94a10f;
    color: #000;
    text-decoration: none;
}
.navigation a:before {
    position: absolute;
    top: .35em; bottom: .35em; left: 0;
    border-right: solid 1px #fff;
    border-left: solid 1px #a4a4e3;
    content: '';
}
.navigation li:first-child a:before { border: none; }
    • 0