Border Radius does not work within a CSS class

Question

I’m trying to round the edges of a navigation bar through a class and it doesn’t work.

https://jsfiddle.net/oqkt1z9f/

I marked an element <ul> with class navbar, I removed the padding, the margin and changed the weight of the source, even so the edges do not catch:

.navbar{
  list-style-type:none;
  padding:0px;
  margin:0px;
  font-weight:bold;
  border-radius:5px;
}

There are times that you get bored, it seems that it is one way but it is another in the CSS hehe.

Answer 1

An alternative would be to use inline-block instead of float (if the bar has full width is even better). See an example:

.navbar{
  padding:0;
  margin:0;
  border-radius:5px;
  background-color:#1A1A1A;
  overflow:hidden;
  list-style-type:none;
}

.navbar li,.navbar a {
  display:inline-block;
}

.navbar a {
  padding:10px;
  font-weight:bold;
  color:#E8142D;
  text-decoration:none;
}

/*      daqui pra baixo nem precisa, é só para
     demonstrar como fazer diversas configurações    */

.right {text-align:right}
.short {display:inline-block;text-wrap:none}
.navbar a:hover { color:#000; background:#666; }
ul.navbar {margin-bottom:10px}

<ul class="navbar">
  <li><a href="#home">Início</a></li>
  <li><a href="#artigos">Artigos</a></li>
  <li><a href="#contato">Contato</a></li>
  <li><a href="#sobre">Sobre</a></li>
</ul>

<ul class="navbar right">
  <li><a href="#home">Início</a></li>
  <li><a href="#artigos">Artigos</a></li>
  <li><a href="#contato">Contato</a></li>
  <li><a href="#sobre">Sobre</a></li>
</ul>

<ul class="navbar short">
  <li><a href="#home">Início</a></li>
  <li><a href="#artigos">Artigos</a></li>
  <li><a href="#contato">Contato</a></li>
  <li><a href="#sobre">Sobre</a></li>
</ul>

Points of interest:

• We move the padding into the a, otherwise the user has to hit the click on the written part, so the click is on the entire "button" bar

• other settings I switched to their proper places too, so the CSS logic gets more organized according to the function of the elements

• we change the background color to the top element, so we can apply the rounded edge to the ul

• we use overflow:hidden, so that the :hover don’t get square corners

• I added an example of :hover for you to understand the advantage of padding directly on the link.

As @Guilherme mentioned, if you want to avoid spaces between the inline Blocks, here are several examples of how to avoid:

https://stackoverflow.com/a/5078297/916193

Answer 2

The problem is that the background is in elements within UL and not in UL and these elements are floating right.

I think by the effect of the image you want the background to limit the area of the links, so you can do it in two ways, using display: inline-block; with overflow: hidden; (similar to @Bacco):

In both example I moved the background to ul

.navbar{
  list-style-type:none;
  padding:0px;
  margin:0px;
  font-weight:bold;
  border-radius:5px;
  display: inline-block;
  background-color:#1A1A1A; 
}

.navbar li{
  display: inline-block;
  padding:10px;
  
}
.navbar a{
  text-decoration:none;
  color:#E8142D
}

<ul class="navbar">
  <li><a href="#home">Início</a></li>
  <li><a href="#artigos">Artigos</a></li>
  <li><a href="#contato">Contato</a></li>
  <li><a href="#sobre">Sobre</a></li>
</ul>

However, elements of inline type or with display: inline-* usually generate a small margin below the elements (not always, depending on the situation and or use of the font), this can be a little boring to solve, so you can use float in the ul and a pseudo-element (::after or :after for older browsers) with clear:both;

.navbar{
  list-style-type:none;
  padding:0px;
  margin:0px;
  font-weight:bold;
  border-radius:5px;
  float:left;
  background-color:#1A1A1A; 
}

.navbar::after, .navbar:after{
  clear: both;
  content: " ";
  height: 0;
  display: block;
}

.navbar li{
  float:left;
  padding:10px;
  
}
.navbar a{
  text-decoration:none;
  color:#E8142D
}

<ul class="navbar">
  <li><a href="#home">Início</a></li>
  <li><a href="#artigos">Artigos</a></li>
  <li><a href="#contato">Contato</a></li>
  <li><a href="#sobre">Sobre</a></li>
</ul>

<div style="background: #fc0;">oi</div>

I talked to @Bacco, I think two solutions that can be applied to solve the spacing on inline-block would be the font-size:0 (apart from the examples that Bacco quoted) and create a parent element, in this way it will not generate extra space and will not stick to the side of another elemnent, for example:

.navbar {
     font-size: 0;
}

.navbar ul {
  font-size: 10pt; /*ou font-size: initial;*/
  list-style-type:none;
  padding:0px;
  margin:0px;
  font-weight:bold;
  border-radius:5px;
  display: inline-block;
  background-color:#1A1A1A; 
}

.navbar li{
  display: inline-block;
  padding:10px;
  
}
.navbar a{
  text-decoration:none;
  color:#E8142D
}

<div class="navbar">
    <ul>
      <li><a href="#home">Início</a></li>
      <li><a href="#artigos">Artigos</a></li>
      <li><a href="#contato">Contato</a></li>
      <li><a href="#sobre">Sobre</a></li>
    </ul>
</div>

<div style="background: #fc0;">oi</div>

And the float would look like this:

.navbar ul {
  list-style-type:none;
  padding:0px;
  margin:0px;
  font-weight:bold;
  border-radius:5px;
  float:left;
  background-color:#1A1A1A; 
}

.navbar::after, .navbar:after, /*aplica quebra no para o element pai*/
.navbar ul::after, .navbar ul:after { /*aplica quebra no para o UL*/
  clear: both;
  content: " ";
  height: 0;
  display: block;
}

.navbar li{
  float:left;
  padding:10px;
  
}
.navbar a{
  text-decoration:none;
  color:#E8142D
}

<div class="navbar">
    <ul>
      <li><a href="#home">Início</a></li>
      <li><a href="#artigos">Artigos</a></li>
      <li><a href="#contato">Contato</a></li>
      <li><a href="#sobre">Sobre</a></li>
    </ul>
</div>

<div style="background: #fc0;">oi</div>

Answer 3

You must apply the border-radius in the li.

But only in the first (.navbar li:first-of-type) and at last (.navbar li:last-of-type).

See the FIDDLE updated and working: https://jsfiddle.net/oqkt1z9f/1/

Run the code snippet below and see working:

.navbar{
  list-style-type:none;
  padding:0px;
  margin:0px;
  font-weight:bold;
}

.navbar li{
  float:left;
  padding:10px;
  background-color:#1A1A1A; 
  
}

.navbar li:first-of-type{
  border-radius:5px 0px 0px 5px;
}

.navbar li:last-of-type{
  border-radius:0px 5px 5px 0px;
}

.navbar a{
  text-decoration:none;
  color:#E8142D
}

<ul class="navbar">
  <li><a href="#home">Início</a></li>
  <li><a href="#artigos">Artigos</a></li>
  <li><a href="#contato">Contato</a></li>
  <li><a href="#sobre">Sobre</a></li>
</ul>