Adding an additional border when combining two divs with rounded borders

I attempted to create a design similar to the Instagram "ask me a question" box, but I am encountering an issue where there is some extra border around the title when the two divs merge.

What am I doing incorrectly?

.info {
    overflow: hidden;
    border-radius: 10px;
    background-color: white;
}

.info .description-title {
    color: #f1ecff;
    background-color: #333;
    font-size: 15px;
    padding: 12px;
        user-select: none;
}

.info .description-text {
    max-height: 100px;
    overflow-y: auto;
    text-align: justify;
    font-size: 14px;
    padding: 8px 12px;
}
<div class="info">
      <h3 class="description-title">Description</h3>
      <p class="description-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis quo omnis, culpa modi explicabo eius delectus dolorem a inventore, adipisci aspernatur laudantium voluptatum corporis vitae enim qui? Eveniet cumque officiis molestiae tempora mollitia quia id minima earum facilis recusandae voluptatum voluptatibus optio similique dolore nobis, ab excepturi aliquam quasi animi quisquam porro velit quam veritatis? Natus modi aperiam adipisci maxime.</p>
</div>
htmlcssborderborder-radius

Answer №1

check out this link give these adjustments a try, they might just do the trick

.information {
overflow: visible;
border-radius: 20px;
}

.information .title-description {
color: #eff1ff;
background-color: #232323;
font-size: 16px;
padding: 15px;
user-select: all;
margin: 5px;
}

.information .text-description {
max-height: 120px;
overflow-y: scroll;
text-align: left;
font-size: 13px;
padding: 25px 18px;
margin: 3px;
background-color: #ccc;
}

Answer №2

After carefully reviewing the issue, I have decided to remove the previous response. Here's a suggestion: add a border to the info class using the same color as the black area. You could potentially conceal a small white section behind the black one for an interesting effect.

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

Customize WordPress zerif-lite theme with CSS to decrease page width temporarily

Is there a way to decrease the width of a specific page on my website without modifying the current theme that I am using (zerif-lite)? I want to accomplish this task by adding custom CSS to styles.css. However, I am facing difficulties as I only want to a ...

htmlcsswordpresswordpress-theming

Animate the CSS when the content is within the viewport using pagepiling.js integration

I'm currently working on animating content as it enters the viewport. However, I've encountered an issue where jQuery (used to check if the content is in the viewport) isn't functioning properly alongside pagepiling.js (). I suspect this mig ...

javascripthtmlcssanimate.csspagepiling.js

Utilizing PHP for file uploading and inserting the file path into a MySQL database

FileUpload.php: <?php //Directory to save uploaded images $targetDir = "img/"; $targetFilePath = $targetDir . basename($_FILES['uploadedFile']['name']); //Get form data $fileName = $_POST['uploadedFile']; $fileDescriptio ...

phphtmlmysqlweb

This webpage is optimized for all browsers, with the exception of the Android Browser that may display fonts with larger sizes

When developing my webpage, I made sure it was compatible with all major browsers and even optimized it for mobile browsers. However, I overlooked testing the page on Android browser (specifically Android 4.2) and encountered some issues. The viewport set ...

androidhtmlcssfonts

Is the code generated by Webflow.com functional and practical?

Recently, I have discovered the wonders of www.webflow.com for creating an admin layout. It excels in generating a flexbox layout based on my PSD design without requiring me to manually code with Gulp. My plan is to further simplify the process by breaki ...

htmlcssflexbox

The toggle feature doesn't seem to be working properly in Bootstrap 5

I've tested it in the latest Bootstrap version and still can't get it to work. I even switched to version 5, but the toggle functionality remains a problem. I've tried various solutions from StackOverflow with no luck ** I've added all ...

javascripthtmlcssbootstrap-modalbootstrap-5

What is the best way to make tooltips track a specific data point they are connected to in D3?

I am working with a figure created using D3 that includes tooltips appearing near a data point when hovered over and can be pinned by clicking on the point. I have implemented the functionality to change the plotted values for the points by clicking on spe ...

javascripthtmlcssd3.js

The JavaScript code is not executing properly within the HTML document

I am trying to execute a function from my JavaScript file in my HTML page. Here is the code snippet: index.html <!DOCTYPE html> <html><body> <h2>Web1</h2> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jq ...

javascriptjqueryhtml

The HTML5 webpage is failing to send a JQuery Ajax request

I am encountering an issue with my Ajax setup on a HTML page. The call to a web service does not seem to be working as intended, and I suspect that the ajax call is not even reaching the web service at all. The problem arises when I click the button, an e ...

jqueryajaxhtmlwcf

CSS: Display the index of each ordered list item within a child element

I'm working on creating a unique accordion-style widget similar to the design shown in this image: https://i.sstatic.net/EBymf.png My plan is to utilize an ordered list where each <li> element will include a question, answer, and an expand/col ...

htmlcss

Guide to dynamically insert rows in HTML using Vue.js based on the selected option

This is the initial row. Depending on the selection made here, different rows will be displayed <div class="row"> <div class="col-md-4"> <div class="form-group label-floating"> <label class="control-label">Case Type< ...

javascriptjqueryhtmlvue.jsvue-component

Incorporate vanilla JavaScript and HTML into a Next.js application

I am facing an issue where I have a file that contains JavaScript and HTML code, which needs to be rendered within a Next.js application. The challenge is that the code in the file cannot be converted to JSX, and React Helmet does not seem to render anythi ...

javascripthtmlreactjsnext.jsreact-helmet

Top Method for Incorporating Syntax Highlighting into Code Blocks - React Sanity Blog

I'm currently exploring the most effective method to incorporate syntax highlighting into my react sanity.io blog. Here's a look at the article component I've developed using react: import React, {useEffect, useState} from "react"; import ...

javascriptcssreactjssyntaxsanity

The _rfs.scss width rule in Angular-Bootstrap-NgBootstrap is overriding the column width of the col-rules

The Dilemma I am currently working on an Angular project that incorporates Bootstrap and ng-bootstrap. My intention is to utilize the grid system within this project, but I encountered some bugs along the way. When trying to render the following HTML/TS ...

cssangularsassbootstrap-5ng-bootstrap

Compatibility Issue between Jquery UI CheckBox Button and Click Function in IE8

Situation: After calling addButton() function in jQuery, the checkbox element is successfully turning into a button. However, the click event that should trigger an alert message is not functioning. This issue seems to be specific to IE-8 compatibility. ...

javascriptjqueryhtmljquery-uiinternet-explorer-8

Creating tilted divs with dynamic height to perfectly fit the content

I'm struggling to incorporate this design into my webpage; I can't seem to get the right div's height to match the left div as depicted in the second image. Can someone offer some assistance? Additionally, when viewed on mobile, the squares ...

htmlcssbootstrap-4

Utilize the jQuery ajax post method within each loop to handle asynchronous requests, ensuring that the

I am currently working on a jQuery ajax function that is embedded within an each function as it needs to be executed for each post on the website. $('.post .button').each(function() { $(this).click(function() { $.ajax({ url: 'action ...

phpjqueryhtmlcssajax

Tips for adjusting the size of Bootstrap 5 card to fit various image sizes responsively

I am facing an issue where I have four images of different sizes placed in 4 cards in a row. Due to the varying heights of the images, the cards appear untidy. I am looking for a way to fix this problem while ensuring that the layout remains responsive. Be ...

htmlcssbootstrap-5

CSS hover effect not working while mouse is in motion

As a beginner in HTML, CSS, jQuery, and JavaScript, I've been trying to trigger a div when hovering over one area using the adjacent siblings code. However, I'm encountering an issue where if I move my mouse after triggering the event, it keeps r ...

csshoversiblings

Adding a pair of labelled angled columns in a container that spans the full width is a breeze

I'm in pursuit of this: https://i.sstatic.net/HYbC1.jpg What I currently possess is: <div class="row slantrow"> <div class="row slant-inner"> <div class="col-md-6 slant-left"> <p>text</p> ...

htmlcsstwitter-bootstrapbootstrap-4