rounded buttons cut out

Question

I'm trying to create a menu with buttons.
The buttons have transparent background so you can see the image behind.
Like this:

• Note the rounded corners on the buttons.

Background-image

Here is what i did:

body {
  margin: 0;
}
.nav {
  width: 100vw;
}
.nav ul {
  position: relative;
  width: 200px;
  list-style: none;
  background-image: url("https://i.sstatic.net/NgUAO.png");
  background-size: cover;
  margin: 0;
  padding: 0;
  height: 400px;
  border: 2px solid red;
}
.nav ul li {
  line-height: 2em;
  text-align: center;
  box-sizing: border-box;
  margin: 0;
  width: 100%;
  height: 25%;
  position: absolute;
  border: 10px solid #660066;
  background: transparent;
  color: firebrick;
}
.nav ul li a {
  margin: 0;
}
.nav ul li:nth-of-type(1) {
  top: calc(25%);
}
.nav ul li:nth-of-type(2) {
  top: calc(50%);
}
.nav ul li:nth-of-type(3) {
  top: calc(75%);
}

<div class="nav">
  <ul>
    <li><a href="#">Creating</a>
    </li>
    <li><a href="#">Custom</a>
    </li>
    <li><a href="#">Menu</a>
    </li>
    <li><a href="#">Heres</a>
    </li>
  </ul>
</div>

This created the effect i wanted, but the rounded corners are not present.

I also tried using the clip: rect() but this also created the same result, none rounded corners.

Answer 1

The answer everyone gave you was logical IF you did the buttons as anchors instead of an unordered list

So maybe you can utilize Ghost buttons. you can then have the sites background with your image (don't know if that's your aim), or you can add the images to the buttons similar to what you tried here).

Here's a great example (copy/paste from codepen as you will see, so as not to reinvent the wheel, and because the code is nice and clean):

<div class="wrap">
  <h1>Ghost Buttons with CSS3 <small>created by <a href="https://twitter.com/mithicher">
    @mithicher
  </a></small></h1>

  <h2>Buttons with Radius</h2>
  <a class="btn btn-medium btn-blue btn-radius" href="#">Download</a>
  <a class="btn btn-medium btn-green btn-radius" href="#">Sign Up</a>
  <a class="btn btn-medium btn-orange  btn-radius" href="#">Sign In</a>
  <a class="btn btn-medium btn-red btn-radius" href="#">Read More</a>
  <a class="btn btn-medium btn-gray btn-radius" href="#">Forgot Password</a>

  <hr />

  <h2>Medium Buttons</h2>
  <a class="btn btn-medium btn-blue" href="#">Download</a>
  <a class="btn btn-medium btn-green" href="#">Sign Up</a>
  <a class="btn btn-medium btn-orange" href="#">Sign In</a>
  <a class="btn btn-medium btn-red" href="#">Read More</a>
  <a class="btn btn-medium btn-gray" href="#">Forgot Password</a>

  <hr />

  <h2>Small Buttons</h2>
  <a class="btn btn-small btn-blue" href="#">Download</a>
  <a class="btn btn-small btn-green" href="#">Sign Up</a>
  <a class="btn btn-small btn-orange" href="#">Sign In</a>
  <a class="btn btn-small btn-red" href="#">Read More</a>
  <a class="btn btn-small btn-gray" href="#">Forgot Password</a>

   <hr />

  <h2>Large Buttons</h2>
  <a class="btn btn-large btn-blue" href="#">Download</a>
  <a class="btn btn-large btn-green" href="#">Sign Up</a>
  <a class="btn btn-large btn-orange" href="#">Sign In</a>
  <a class="btn btn-large btn-red" href="#">Read More</a>
  <a class="btn btn-large btn-gray" href="#">Forgot Password</a>

  <hr />

  <p>Colors taken from <a href="http://colours.neilorangepeel.com">colours.neilorangepeel.com</a>.</p>
</div>






@import url(http://fonts.googleapis.com/css?family=Raleway);

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.wrap {
  width: 100%;
  max-width: 900px;
  margin: 4em auto;
  font-family: Raleway, Arial, sans-serif;
  padding: 1em 2em;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 2px solid #eee;
    margin: 2em 0;
    padding: 0;
}

h1, h2 {
  margin-bottom: 1em;
  border-bottom: 2px solid #eee;
  line-height: 1.5;
}

h1 > small{
  color: #666;
}

h1 > small > a,
p > a{
  color: #3CB371;
  text-decoration: none;
}
h1 > small > a:hover,
p > a:hover{
  text-decoration: underline;
}

/* Buttons styles */
input::-moz-focus-inner,
button::-moz-focus-inner {
    border: 0;
    padding: 0;
}

input[type="submit"].btn,
button.btn {
    cursor: pointer;
}

a.btn,.btn {
  margin-right: 1em; /* remove this while use*/
  margin-bottom: 1em; /* remove this while use*/
    display: inline-block;
    outline: none;
    *zoom: 1;
    text-align: center;
    text-decoration: none;
    font-family: inherit;
    font-weight: 300;
    letter-spacing: 1px;
    vertical-align: middle;
    border: 1px solid;
    transition: all 0.2s ease;
    box-sizing: border-box;
    text-shadow: 0 1px 0 rgba(0,0,0,0.01);
}
/* Radius */
.btn-radius {
  border-radius: 3px;
}
/* Sizes */
.btn-small {
    font-size: 0.8125em;
    padding: 0.4125em 1.25em;
}
.btn-medium {
    font-size: 0.9375em;
    padding: 0.5375em 1.375em;
}
.btn-large {
    font-size: 1.0625em;
    padding: 0.5625em 1.5em;
}

/* Colors */
.btn-green {
    color: #3CB371;
    border-color: #3CB371;
}
.btn-green:hover {
  background: #3CB371;
  color: #fff;
  border-color: #3CB371;        
}

.btn-blue {
    color: #4682B4;
    border-color: #4682B4;
}
.btn-blue:hover {
  background: #4682B4;
  color: #fff;
  border-color: #4682B4;        
}

.btn-orange {
    color: #FF8C00;
    border-color: #FF8C00;
}
.btn-orange:hover {
  background: #FF8C00;
  color: #fff;
  border-color: #FF8C00;        
}

.btn-red {
    color: #B22222;
    border-color: #B22222;
}
.btn-red:hover {
  background: #B22222;
  color: #fff;
  border-color: #B22222;    
}

.btn-gray {
    color: #808080;
    border-color: #808080;
}
.btn-gray:hover {
  background: #808080;
  color: #fff;
  border-color: #808080;    
}

Hope it helps!

Answer 2

Pseudo Element

If you add a pseudo element then you can create the effect that you like.

It requires 3 very simple steps

• Add pseudo ::before
• Position to fit with parent border
• Add border-radius bigger than parent

body {
  margin: 0;
}
.nav {
  width: 100vw;
}
.nav ul {
  position: relative;
  width: 200px;
  list-style: none;
  background-image: url("https://i.sstatic.net/NgUAO.png");
  background-size: cover;
  margin: 0;
  padding: 0;
  height: 400px;
  border: 2px solid red;
}
.nav ul li {
  line-height: 2em;
  text-align: center;
  box-sizing: border-box;
  margin: 0;
  width: 100%;
  height: 25%;
  position: absolute;
  border: 10px solid #660066;
  background: transparent;
  color: firebrick;
}
.nav ul li::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  border: 10px solid #660066;
  top: -10px;
  left: -10px;
  border-radius: 15px;
}
.nav ul li a {
  margin: 0;
}
.nav ul li:nth-of-type(1) {
  top: calc(25%);
}
.nav ul li:nth-of-type(2) {
  top: calc(50%);
}
.nav ul li:nth-of-type(3) {
  top: calc(75%);
}

<div class="nav">
  <ul>
    <li><a href="#">Creating</a>
    </li>
    <li><a href="#">Custom</a>
    </li>
    <li><a href="#">Menu</a>
    </li>
    <li><a href="#">Heres</a>
    </li>
  </ul>
</div>

Box Shadow

This is also achievable using a pseudo element with a box-shadow.

body {
  margin: 0;
}
.nav {
  width: 100vw;
}
.nav ul {
  position: relative;
  width: 200px;
  list-style: none;
  background-image: url("https://i.sstatic.net/NgUAO.png");
  background-size: cover;
  margin: 0;
  padding: 0;
  height: 400px;
  border: 2px solid red;
}
.nav ul li {
  line-height: 2em;
  text-align: center;
  box-sizing: border-box;
  margin: 0;
  width: 100%;
  height: 25%;
  position: absolute;
  border: 10px solid #660066;
  background: transparent;
  color: firebrick;
}
.nav ul li::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  box-sizing: border-box;
  left: 0;
  border-radius: 10px;
  border: 2px solid #660066;
  box-shadow: 0 0 0px 10px #660066;
}
.nav ul li a {
  margin: 0;
}
.nav ul li:nth-of-type(1) {
  top: calc(25%);
}
.nav ul li:nth-of-type(2) {
  top: calc(50%);
}
.nav ul li:nth-of-type(3) {
  top: calc(75%);
}

<div class="nav">
  <ul>
    <li><a href="#">Creating</a>
    </li>
    <li><a href="#">Custom</a>
    </li>
    <li><a href="#">Menu</a>
    </li>
    <li><a href="#">Heres</a>
    </li>
  </ul>
</div>

Answer 3

Since you've already using :nth-child it is much easier to set background image to an a element instead of ul and add a background-position offset:

.nav {
    background-color: purple;
    width: 180px;
    padding: 1px 0;
}
.nav a {
    display: block;
    background-image: url(https://i.sstatic.net/NgUAO.png);
    text-align: center;
    border-radius: 10px;
    height: 70px;
    margin: 15px;
    line-height: 70px;
    font-size: 30px;
    font-family: sans-serif;
    text-decoration: none;
    color: lightblue;
}
.nav a:nth-child(2) {background-position: 0 -80px;}
.nav a:nth-child(3) {background-position: 0 -160px;}
.nav a:nth-child(4) {background-position: 0 -240px;}

<div class="nav">
  <a href="#">Awesome</a>
  <a href="#">Custom</a>
  <a href="#">Menu</a>
  <a href="#">Here</a>
</div>

Answer 4

Dear you have used only one image for all the buttons try using different image.

body {
  margin: 0;
}
.nav {
  width: 100vw;
}
.nav ul {
  position: relative;
  width: 200px;
  list-style: none;
  background-image: url("https://i.sstatic.net/NgUAO.png");
  background-size: cover;
  margin: 0;
  padding: 0;
  height: 400px;
  border: 2px solid red;
}
.nav ul li {
  line-height: 2em;
  text-align: center;
  box-sizing: border-box;
  margin: 0;
  width: 100%;
  height: 25%;
  position: absolute;
  border: 10px solid #660066;
  background: transparent;
  color: firebrick;
}
.nav ul li a {
  margin: 0;
}
.nav ul li:nth-of-type(1) {
  top: calc(25%);
}
.nav ul li:nth-of-type(2) {
  top: calc(50%);
}
.nav ul li:nth-of-type(3) {
  top: calc(75%);
}
.r{
    border-radius: 25px;
    background: url(paper.gif);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px; 
    width: 200px;
    height: 150px;    
}

<div class="nav">
  <ul>
    <li class="r"><a href="#" >Creating</a>
    </li>
    <li class="r"><a href="#">Custom</a>
    </li>
    <li class="r"><a href="#">Menu</a>
    </li>
    <li class="r"><a href="#">Heres</a>
    </li >
  </ul>
</div>

Answer 5

I have got solution by using :before to li find fiddle demo

I have just added this css code in your code and it's done.

.nav ul li:before {
    content:'';
    position:absolute;
    top:-5px;
    left:-5px;
    width:100%;
    height:100%;
    border:5px solid #660066;
    border-radius:10px;
    pointer-events:none;
}

Answer 6

Answer Redacted not correct

In your CSS you can use the border radius property to create rounded corners.

border-radius: 10px; 

See the following tutorial on W3 Schools

Answer 7

Found the solution to adding a rounded corner to the buttons.

What i did:

1. added a large border to the <a> element inside the <li>.
2. Added an absolute position to the <a> element.
3. positioned the a element minus top and minus left equal to its border.
4. Results :D

body {
  margin: 0;
}
.nav {
  width: 100vw;
}
.nav ul {
  position: relative;
  width: 200px;
  list-style: none;
  background-image: url("https://i.sstatic.net/NgUAO.png");
  background-size: cover;
  margin: 0;
  padding: 0;
  height: 400px;
  border: 2px solid red;
}
.nav ul li {
  position: absolute;
  line-height: 2em;
  text-align: center;
  box-sizing: border-box;
  border: 15px solid purple;
  margin: 0;
  width: 100%;
  height: 25%;
  overflow: hidden;
}
.nav ul li a {
  display: inline-block;
  top: -5px;
  left: -5px;
  position: absolute;
  height: 100%;
  width: 100%;
  border-radius: 15px;
  border: 5px solid purple;
  background-color: transparent;
  margin: 0;
}
.nav ul li:nth-of-type(1) {
  top: calc(25%);
}
.nav ul li:nth-of-type(2) {
  top: calc(50%);
}
.nav ul li:nth-of-type(3) {
  top: calc(75%);
}

<div class="nav">
  <ul>
    <li><a href="#">Creating</a>
    </li>
    <li><a href="#">Custom</a>
    </li>
    <li><a href="#">Menu</a>
    </li>
    <li><a href="#">Heres</a>
    </li>
  </ul>
</div>