border-radius rounded rectangle

Question

I have to get a green rectangle like this one: rectangle

I was trying to use border-radius in CSS file for many ways, but unfortunately, I couldn't get the same shape.

.section_one{
  background-color:#414141;
}
.navigation_list{
  list-style-type: none;
  display: table;
  height: 100%;
  color: white;
}

.navigation_list--item{
  display: table-cell;
  vertical-align: middle;
  padding: 20px;

}


.active{
  background-color: #76C38F;

}
.section_one{
display: flex;
justify-content: space-around;
}

<!DOCTYPE html>
<html>
<head>
  <title>Home</title>
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
</head>
<body>
  <!-- Just an image -->
<div class="section_one">
   <div>
    <nav class="navbar navbar-light bg-faded">
      <a class="navbar-brand" href="#">
        <img src="assets/logo.png" alt="logo">
        <img src="assets/sub_description.png" alt="description">
      </a>
    </nav>
   </div>
   <div class="navigation">
     <ul class="navigation_list">
       <li class="navigation_list--item active">Home</li>
       <li class="navigation_list--item">Style Demo</li>
       <li class="navigation_list--item">Full Width</li>
       <li class="navigation_list--item">Dropdown</li>
       <li class="navigation_list--item">Portfolio</li>
       <li class="navigation_list--item">Gallery</li>
     </ul>

   </div>
</div>



</body>

</html>

.active { background-color: #76C38F; border-radius: 23px; display: block; padding: 4px 20px; margin-top: 30px; } Change the display: table-cell. It Will Fix and you will get the shape. — Adharsh M, May 27 '17 at 10:41
Possible duplicate of [Creating rounded corners using CSS](https://stackoverflow.com/questions/7089/creating-rounded-corners-using-css) — Mohammad Usman, May 29 '17 at 05:07

score 0 · Answer 1 · answered May 27 '17 at 10:39

0

You just have to add

border-radius: 3px;

to your css class (you can adjust the number of pixels to match your needs obciously!).

answered May 27 '17 at 10:39

Antoine Boisier-Michaud

1,575
2
16
30

score 0 · Answer 2 · answered May 27 '17 at 10:43

0

You May Try This.

.active {
    background-color: #76C38F;
    border-radius: 6px;
    display: block;
    padding: 4px 20px;
    margin-top: 30px;
}

It may look like this.

answered May 27 '17 at 10:43

Adharsh M

2,773
2
20
33

Thank you, that's help me a lot ;). I just changed the margin-top for 20px. – Magdalena Dering May 27 '17 at 11:00
OK. You are Welcome. – Adharsh M May 27 '17 at 11:02

score 0 · Answer 3 · answered May 27 '17 at 11:03

TRy this!

.section_one{
  background-color:#414141;
}
.navigation_list{
  list-style-type: none;
  display: table;
  color: white;
}

.navigation_list--item{
  display: table-cell;
  vertical-align: middle;
  padding: 0px 20px;
  border-radius:8px;
}


.active{
  background-color: #76C38F;

}
.section_one{
display: flex;
justify-content: space-around;
}

<!DOCTYPE html>
<html>
<head>
  <title>Home</title>
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
</head>
<body>
  <!-- Just an image -->
<div class="section_one">
   <div>
    <nav class="navbar navbar-light bg-faded">
      <a class="navbar-brand" href="#">
        <img src="assets/logo.png" alt="logo">
        <img src="assets/sub_description.png" alt="description">
      </a>
    </nav>
   </div>
   <div class="navigation">
     <ul class="navigation_list">
       <li class="navigation_list--item active">Home</li>
       <li class="navigation_list--item">Style Demo</li>
       <li class="navigation_list--item">Full Width</li>
       <li class="navigation_list--item">Dropdown</li>
       <li class="navigation_list--item">Portfolio</li>
       <li class="navigation_list--item">Gallery</li>
     </ul>

   </div>
</div>



</body>

</html>

border-radius rounded rectangle

3 Answers3