Search code examples
htmlcssborder

CSS: How to get straight border-bottom with a border radius to a div tag

I want a div element to have curved border with a specific value of border-radius and a straight border-bottom. If I use the border radius, the radius is also applied to the bottom border. Below image shows how bottom border has a radius.

enter image description here

My current css snippet:

.post-list {
        margin-bottom: 10px;
        border-top-color: transparent;
        border-right-color: transparent;
        border-left-color: transparent;
        background: rgb(36, 27, 29);
        padding: 1rem 0;
        padding-left: 10px;
        margin-left: 0px;
        border-bottom: 1px solid rgb(23, 9, 9);
        box-sizing: border-box;
        border-radius: 6px;
    }

I want a straight bottom border but curved border for the div. How can I go about doing that?

Solution

  • I am not sure what you try to achieve, but as I understood, the easiest way would be two nested div:

    #outerDiv {
  border-bottom: 1px solid red;
}

#innerDiv {
  background-color: grey;
  border-radius: 5px;
  padding: 10px;
}
    <div id="outerDiv">
  <div id="innerDiv">Here be Content</div>
</div>