:first-child border-top-right-radius wont work

Question

I want to create a navigation and the first-child of the navigation should get a border radius. This code wont work border-top-left-radius: 10px;

*{
    margin: 0px;
    padding: 0px;
}


nav {
    position: fixed;
    background-color: #D7E8D5;
    left: 50%;
    margin-left: -600px;
    transform: translate(-100%);
    top: 100px;
}
nav ul {
    list-style: none;
}

nav ul li{
    background-color: #D7E8D5;
}

nav ul li:first-child{
    border-top-left-radius: 10px;
}
    
nav ul a {
    display: block;
    padding: 10px 20px;
    color: #4A3A47;
    text-decoration: none;
}

<html>
    <head>
        <title>Startseite</title>
        <link rel="stylesheet" href="index.css">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    </head>
    <body>
        
        <nav>
            <ul>
                <li><a href="#">Link1</a></li>
                <li><a href="#">Link1</a></li>
                <li><a href="#">Link1</a></li>
                <li><a href="#">Link1</a></li>
            </ul>
        </nav>

    </body>
</html>

..........................................................................................................................................................

Weafs.py · Answer 1 · 2015-01-17T20:29:45.637

The problem is that you are applying the same background-color to the nav, so even though the border-top-left-radius is applied to the first li, you won't see any changes.

Remove the background-color: #D7E8D5; from nav.

Note: I've removed margin-left: -600px to keep the nav in view.

* {
  margin: 0px;
  padding: 0px;
}
nav {
  position: fixed;
  left: 50%;
  margin-left: 0px;
  top: 100px;
}
nav ul {
  list-style: none;
}
nav ul li {
  background-color: #D7E8D5;
}
nav ul li:first-child {
  border-top-left-radius: 10px;
}
nav ul a {
  display: block;
  padding: 10px 20px;
  color: #4A3A47;
  text-decoration: none;
}

<nav>
  <ul>
    <li><a href="#">Link1</a>
    </li>
    <li><a href="#">Link1</a>
    </li>
    <li><a href="#">Link1</a>
    </li>
    <li><a href="#">Link1</a>
    </li>
  </ul>
</nav>

score 1 · Accepted Answer · answered Jan 17 '15 at 20:27

Your code works, but you're adding the same background color to nav element, thus you can't see it. Just change this:

nav {
    position: fixed;
    background-color: #D7E8D5;
    left: 50%;
    margin-left: -600px;
    transform: translate(-100%);
    top: 100px;
}

to this:

nav {
    position: fixed;
    background: transparent; /* or just get rid of this line */
    left: 50%;
    margin-left: -600px;
    transform: translate(-100%);
    top: 100px;
}

:first-child border-top-right-radius wont work

2 Answers2

Linked