Creating a sleek bottom border with rounded edges on a div tag using CSS

Is there a way to achieve a div element with curved borders and a straight bottom border? Currently, when applying a border radius, the radius is also visible on the bottom border as shown in the image below.

https://i.sstatic.net/JH75y.png

This is 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 am looking for a solution that will give me a straight bottom border while maintaining curved borders for the rest of the div. Any suggestions on how to achieve this?

htmlcssborder

Answer №1

Perhaps you are aiming for something specific, but from what I gather, the simplest approach involves using two nested div elements:

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

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

Answer №2

To achieve this effect, you can directly apply the following styles to the HTML Input tag:

background color : linear-gradient(0deg, red, red) 0px 100% / 100% 0.0625rem no-repeat border-box border-box white

border style : 1px solid black

bottom border : none

Answer №3

To achieve a design without a border radius at the bottom, you can specify top borders only by using border-top-left-radius and border-top-right-radius. Here's an example CSS code 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;
    color: white;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}
<div class= "post-list">
hello world
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Center the title vertically APEXCHARTS

I created this chart using Apex charts https://i.sstatic.net/j34Wc.png However, I am facing an issue where the 'Chart' title and caption are not properly aligned. The title should align with the graph horizontally, and the caption vertically. ...

javascriptjqueryhtmlcssapexcharts

Ways to speed up the disappearance of error messages

There is a minor issue that I find quite annoying. The validation error message takes too long (approximately 3 seconds) to disappear after a valid input has been entered. Let me give you an example. https://i.sstatic.net/8UKrm.png Do you have any tips o ...

javascripthtmlcssangularjserror-handling

Persistent Footer while scrolling on Internet Explorer

Trying to achieve a consistent look across Chrome, IE(11), and FF for my responsive website has been a challenge. The main issue I'm facing in IE is that when the site's content extends beyond the viewport, the scrollbar fails to reach the end d ...

htmlcssinternet-explorer

Refresh the HTML webpage using AJAX technology

I am trying to implement a simple html page with a single table that updates in the background every 5 seconds. The traditional solution of using <meta http-equiv="refresh" content="5"> is not suitable as it would disrupt the user experience by displ ...

javascriptjqueryhtmlajax

Interacting with Apexcharts: Exploring a Tiny Column with Hover

While using apexcharts, I encountered an issue with small columns. It can be quite challenging to render the tooltip properly because you have to hover very precisely over the column. Query: Is there a way to expand the hover area to make it easier to int ...

javascriptcssreactjschartsapexcharts

Can @keyframes percentage be determined using a CSS variable?

My animation is responsive to the number of characters present It functions properly with 20 characters: const text = '20 characters length' const speed = 0.1 const $container = document.querySelector('.wave') $container.style.setPr ...

htmlcsscss-animations

attempting to position an icon directly beside a piece of text

I’m struggling to align an icon beside some text. I attempted using the :before tag, but it’s not working. Could this be because I’m utilizing Google icons? Here's the code snippet I'm trying to replicate: .review { width: 317px; hei ...

htmlcss

Moving elements using CSS

Hi, I've been facing this issue with my web development since the start. Whenever I zoom in, the container also moves along. Is there any way to fix this problem? .darkslidecont{ width: 200px; height: 50px; position: relative; bac ...

htmlcss

Utilizing Dojo widgets in Xpages

I'm having trouble applying CSS to certain dojo elements within my Xpage. Here is the CSS style sheet I am using: .formFields { color: rgb(5, 56, 107); font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-style: normal; font-variant: nor ...

cssxpagesxpages-extlib

Ways to adjust the distance between logo and slider

I am using this script to showcase some products. You can find the script at: http://tympanus.net/Tutorials/ItemSlider/ When resizing the web browser from maximum size to smaller, I find that the height between the logo and shoes is too large for my likin ...

jqueryhtmlcssslider

What methods can be used to add a delay to a toggleClass event in order to prevent rapid

After implementing the jQueryUI toggleClass delay function, I noticed that it introduces a delay before the event occurs instead of setting a specific timing for when it can be triggered again. I have multiple DIVs that switch classes when hovered over us ...

javascriptjqueryhtmlcss

Font icon not appearing when toggling the class "before"

I am attempting to utilize two classes, both with a :before pseudo-element. When the target class is hovered over, the two classes swap. This functionality works correctly in Safari, but in other browsers, the icon at the bottom does not display properly. ...

jquerycss

Get the username from Parse instead of using the ObjectID

When using angular and Parse for JavaScript, I have implemented a search field where an admin can input the objectid of a user to display their details. However, I would like to modify this functionality so that the admin can enter the username instead of ...

javascriptjqueryhtmlangularjsparse-platform

Enhancing WordPress Icons for Parent and Child Elements

I am seeking to customize icons on a WordPress website. The site contains a variety of product categories, including subcategories. https://i.sstatic.net/sTm1O.png My goal is to display one icon for parent categories and a different icon for child catego ...

htmlcsswordpressicons

Is the lack of style in PHP echo using Ajax causing issues?

Encountered a Blocking Issue. Started by creating a PHP page incorporating HTML, CSS, JS, and PHP elements. The goal was to allow users to view events based on the selected date within this file. To achieve this, the selected date's value was int ...

javascriptphpjqueryhtmlcss

Switching off toggle does not switch back to primary theme when clicking again for the second time

When I click the button for the first time, it changes the theme. However, when I click it a second time, nothing happens; it seems like it's stuck on the second theme forever. It should change themes with every click. Can someone please help me with ...

javascripthtml

Eliminate the initial item in each list item

I am trying to delete the first element inside each li element, but my current code only removes the a element from the first li and not all li elements. For example: This is what I have: <ul class="myclass"> <li class="product-category produc ...

htmljquery

Creating a custom icon and static placeholder in a bootstrap dropdown list

I am just starting out in the world of web development and I have been experimenting with creating a dropdown list that includes a static, slightly faded placeholder, along with a custom icon. My goal is to have the selected item's text displayed on t ...

javascriptjqueryhtmlcssbootstrap-4

Having trouble locating elements with Selenium in Java?

I've been struggling to locate a particular WebElement using Selenium's API. I attempted to use a wildcard to capture all elements on the page and then iterated through them, but I'm still unable to locate the desired element. Could it possi ...

javahtmlseleniumweb

What is the best way to eliminate the final border in a row that has been applied using the <

I have a table where the tr is styled with a border. I am looking to eliminate the border from the last td in the tr. Here is an example: <table> <thead> <tr> <th>a</th> <th>b</th> <th&g ...

htmlcss