Circular Corners and Concealed Content: A Guide to Border-Radius and Overflow

Having an issue with border-radius and overflow: hidden together, causing a strange problem as shown in the picture.

The image doesn't extend to the edge of the div at the bottom right, leaving a visible curve. Any assistance would be greatly appreciated.

See live version here for reference:

Image

.content__card {
  position: relative;
  margin: 1em 0;
  width: 80em;
  max-width: 80%;
  min-height: 35em;
  border-radius: 0.8em;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  border: none;
}

.content__card .info {
  text-align: left;
  margin: 1.5em 3em;
  height: auto;
}

.content__card .info h2 {
  font-family: "DemiBold", sans-serif;
}

.content__card .info p {
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-family: "Medium", sans-serif;
  margin: 1.5em 0;
}

.content__card a {
  position: absolute;
  bottom: 2em;
  border-radius: 0.8em;
  background: #fff;
  color: #111;
  text-decoration: none;
  font-weight: 700;
  z-index: 3;
  padding: 0.6em 1.8em;
  font-size: clamp(1rem, 3vw, 1.4rem);
  font-family: "Medium", sans-serif;
}

.content__card img {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 30em;
}

.content__card__three {
  background: #7D44FD;
  color: #fff;
}
<div class="content__card content__card__three span-2">
  <div class="info">
    <h2>Follow our</h2>
    <h2>Youtube channel!</h2>
    <a href="#">Youtube</a>
  </div>
  <img src="https://i.imgur.com/5ZXj6fP.png">
</div>

Answer №1

It seems that I may not fully grasp the particulars of your issue, but here is a potential solution based on my understanding. I have applied some basic styling and removed unnecessary code.

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background: #000;
}

.content__card {
  position: relative;
  margin: 1em 0;
  max-width: 90%;
  min-height: 35em;
  border-radius: 0.8em;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
}

.content__card .info {
  text-align: left;
  margin: 1.5em 3em;
  width: 20rem;
}

.content__card .info h2 {
  font-family: "DemiBold", sans-serif;
}

.content__card .info p {
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-family: "Medium", sans-serif;
  margin: 1.5em 0;
}

.content__card a {
  position: absolute;
  bottom: 2em;
  border-radius: 0.8em;
  background: #fff;
  color: #111;
  text-decoration: none;
  font-weight: 700;
  z-index: 3;
  padding: 0.6em 1.8em;
  font-size: clamp(1rem, 3vw, 1.4rem);
  font-family: "Medium", sans-serif;
}

.content__card img {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 30em;
}

.content__card__three {
  background: #7d44fd;
  color: #fff;
}
<div class="content__card content__card__three span-2">
  <div class="info">
    <h2>Follow Us</h2>
    <h2>On Our Youtube Channel!</h2>
    <a href="#">Youtube</a>
  </div>
  <img src="https://i.imgur.com/5ZXj6fP.png">
</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

Navbar-toggle divider shade

I am having trouble changing the color of the line break on the Twitter Bootstrap 3 navbar-toggle function. Upon viewing this image, you can see that there is a line break using my background color. https://i.sstatic.net/qgVAm.jpg I have tried several o ...

Does anyone know why this code isn't functioning properly on Firefox?

This code performs as intended in Chrome, but unfortunately does not function properly in Firefox. ul { list-style:none; } li { display:inline-block; border:1px solid black; } a { display:block; margin:10px; } a:hover { positio ...

Why is object-fit not functioning properly? Could it be that the container is influencing the object-fit

Why isn't object-fit working? It only seems to work with inline styling in the image tag. Could it be the hero_media container affecting object-fit? I'm also attempting to use pseudo-elements (after and before) to add text to the image. Is it nec ...

Incorporate my personal design flair when utilizing third-party React.js component libraries

Incorporating Material UI as a component library in my React project has been beneficial. However, I am facing a challenge where the inline styling provided by Material UI clashes with my existing custom styles that I have developed over time. Is there a ...

Guide on showing a toast message labeled as "Busy" using Google Docs extension

Whenever I launch Spreadsheet or Doc add-ons from the respective stores, I notice a dynamic progress toast appearing at the bottom of the window: This feature doesn't seem to be present in my own add-ons, leading me to believe that it is not integrat ...

Is there a way to use a less mixin or selector to adjust the position depending on the sibling

Currently, I am working on adjusting the position of multiple sibling divs depending on their order. Although they are all currently set to position: absolute, this may change. Each div is a few hundred pixels tall, but I want them to overlap in such a wa ...

Looking to optimize iframing for various screen dimensions

Apologies for the basic question. I am looking for a way to make my iframe responsive on all screen sizes, adjusting both height and width accordingly. Could anyone provide guidance? The current iframe code I have is as follows: <iframe name="ROL_ ...

Is there a way to customize the animation for a button in material UI?

Trying to implement material UI in React and looking for a button that does not have the standard wave animation effect upon clicking, which you can see demonstrated here. Instead, I am searching for an animation that instantly fills the entire button wit ...

implement an angular directive to apply a CSS element

I am utilizing AngularJS and ng-repeat to populate a dynamic list of studies. This list has the capability to toggle into child elements of each item, creating an accordion-style toggle list that can go up to three levels deep for each list item. I am curr ...

Attempting to squeeze a container with a set width into a parent element that spans the entire width of the screen (100

As I embark on my coding journey, I am faced with the challenge of creating a website that features full-width (100%) containers with fixed-width containers nested inside. Despite my efforts to experiment with both figures and divs, I have not been success ...

The design of the button appears unappealing when viewed in

Hi there! I am currently working on creating a button for Outlook 2010, but I am running into an issue. The button image is not aligning vertically in the center, and the padding and margin are not displaying properly. It works perfectly fine on most ema ...

Creating a versatile TailwindCSS grid that can adjust to varying numbers of grid columns

I am currently working with Vue3 and TailwindCSS, attempting to create a grid using a dynamic grid-cols-{n} class. While I am aware that TailwindCSS typically supports up to 12 columns by default, the challenge arises when the number of columns needed is e ...

Accordion symbol for adding or subtracting

Looking for a way to change the Toggle text in my angular 7 application accordion to images or content displaying a + sign for collapse and - for expand. I need to achieve this using CSS in my SCSS stylesheet so that I can later change the color of the sig ...

What is the best way to create vertical separators between CSS grid elements?

I currently have a grid with 3 columns and would like to add two vertical lines to separate the elements. To achieve this, I have placed two span elements between the grid elements using css styling. .vertical_line { position: absolute; height: 100%; ...

How can I achieve a stylish alternating bottom-border effect for my website navigation menu?

Is there a way for me to achieve this navigation style? https://i.sstatic.net/LSNHL.png Here is the code I am working with currently. https://gist.github.com/anonymous/9c239f1b541aa26d461b I'm facing difficulty replicating the line style. Any sugges ...

Navigating CSS Files in CodeIgniter Views: A Simplified Guide

I am encountering an issue where I am unable to load my .css and .js files on views other than the default_controller's index() function. It seems that only this specific view has access to these files. The destination folder itself is not the problem ...

The "Overall Quantity" of items will vary as it goes through different numerical values, despite the fact that I employed --

I am currently working on an e-commerce website with a shopping cart feature. The cart displays the number of items added to it, which increases by one when 'Add to Cart' is clicked and decreases by one when 'Remove' is clicked. However ...

Positioning three squares with the same class adjacent to each other by utilizing absolute positioning

I've been pondering whether it's possible to align elements with the same class and position: absolute next to each other. After an hour of experimenting, I discovered a solution: http://jsfiddle.net/hv01ad1r/1/ However, when attempting to use d ...

Images and CSS are functioning properly when viewed locally, but are not displaying as expected on GitHub pages

There seems to be some issues with transferring my website from a custom domain on Hover. When I try to import it to anthematics.github.io, only the HTML loads while images and CSS are missing. <link rel="stylesheet" href="theme.css" type="text/css"> ...

How can I make my modal box appear after someone clicks on selecting a college?

Can someone help me figure out how to display my modal box after clicking into the selecting list? I've already coded it, but I'm struggling with getting it to show up after the click event. Any assistance is appreciated! In the image provided, ...