Div element failing to display border radius effect

I'm having trouble creating round borders for the second div within a simple 2 div setup.

Here is my code:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div style="height: 100vh; background-color: #00aff0;" class="row align-items-center justify-content-center">
  <div class="mh-100 row align-items-center justify-content-center" style="width: 90%; height: 100%;border-radius: 30px !important;overflow: hidden;">
    <div class="col-lg-6 col-md-6 h-75" style="background-color: #b5ebff">
    </div>
    <div class="col-lg-6 col-md-6 h-75" style="background-color: white">
    </div>
  </div>
</div>

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

htmlcss

Answer №1

The border-radius is being applied to the row, but it's not visible because the child divs do not reach the top/bottom corners. To make it visible, remove the border-radius from the row and apply it to the col(s) instead.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div style="height: 100vh; background-color: #00aff0;" class="row align-items-center justify-content-center">
  <div class="mh-100 row align-items-center justify-content-center" style="width: 90%; height: 100%;overflow: hidden;">
    <div class="col-lg-6 col-md-6 h-75" style="background-color: #b5ebff; border-radius: 30px;">
    </div>
    <div class="col-lg-6 col-md-6 h-75" style="background-color: white; border-radius: 30px;">
    </div>
  </div>
</div>

Answer №2

To enhance the appearance of your layout, consider adding CSS with a border radius. For more detailed information on border radius, you can visit this link.

border-radius: 50px;

Here is an example that demonstrates how to implement border radius in your design: Sample Design

<div style="height: 100vh; background-color: #00aff0;" class="row align-items-center justify-content-center">
<div class="mh-100 row align-items-center justify-content-center" style="width: 90%; height: 100%;border-radius: 30px !important;overflow: hidden;">
    <div class="col-lg-6 col-md-6 h-75" style="background-color: #b5ebff">
        

    </div>
    <div class="col-lg-6 col-md-6 h-75" style="background-color: white;  border-radius: 50px;">

    </div>
</div>

Answer №3

If you're looking to give a white div border radius, try this:

 border-top-right-radius: 50px;
 border-bottom-right-radius: 50px;

It's important to apply the border radius directly to the white div elements like this:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div style="height: 100vh; background-color: #00aff0;" class="row align-items-center justify-content-center">
  <div class="mh-100 row align-items-center justify-content-center" style="width: 90%; height: 100%; overflow: hidden;">
    <div class="col-lg-6 col-md-6 h-75" style="background-color: #b5ebff">
    </div>
    <div class="col-lg-6 col-md-6 h-75" style="background-color: white; border-top-right-radius: 50px; border-bottom-right-radius: 50px;">
    </div>
  </div>
</div>

Answer №4

For styling elements with a border, it's recommended to define a class like rounded-30 for more flexibility. It's best to avoid using inline styles and important tags.

.rounded-30 {
  border-radius: 30px;
}

Instead of inline styles, apply the rounded-30 class to elements:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div style="height: 100vh; background-color: #00aff0;" class="row align-items-center justify-content-center">
  
  <div class="mh-100 row align-items-center justify-content-center" style="width: 90%; height: 100%;overflow: hidden;">
    <div class="rounded-30 col-lg-6 col-md-6 h-75" style="background-color: #b5ebff;">
    </div>
    <div class="rounded-30 col-lg-6 col-md-6 h-75" style="background-color: white;">
    </div>
  </div>
</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

Tips for optimizing the display of a website on mobile devices

I'm facing an issue with the layout of a table and an image on mobile devices. On PC, they display correctly side by side but on mobile, the image overlaps the table or remains next to it. I built the table using Bootstrap 4 as a requirement. I attemp ...

htmlcssbootstrap-4

Delay showing the div until it has finished loading

<section class="slideshow" id="slideshow"> <div id="slides"> <div class="slides-container"> <div class="slide"> <img src="img/people.jpeg" alt="Cinelli"> </div> < ...

javascriptjqueryhtmlcss

Solving the enigma of CSS positioning: mastering floats, margin-left/right, and auto

Hey there, I'm having trouble posting an image but here is the link: I believe this explanation will be clearer, D2, D3 & D4 need to be aligned next to each other and centered on the screen at all times. (960px)      & ...

css

Retrieve the chosen option within the current page

Currently, I am working with a select button on my webpage: <form method="post"> <label> <select id="label" name="challengeX" style="margin-top:150px;"> <option selected value="0"> Global Statistics </opt ...

phphtmlselect

Tips on altering button color when input field is populated

I have been researching online and have not come across any discussions on how to dynamically change the color of a button in JavaScript when an input field is filled. I haven't really tried any code myself because there are very limited resources add ...

javascripthtmljquerybuttoninput

Exploring characteristics using DocumentTraversal

My goal is to list out the attributes of elements using DocumentTraversal specifically for IE11. While I have been successful in enumerating element attributes, I am facing an issue when trying to do the same with attributes. The enumeration stops at the f ...

javascripthtmldocumenttraversal

Tips for transforming a vertical list into a horizontal one with the help of Bootstrap and media queries

I have been attempting to change this list to a horizontal layout for smaller screen sizes without success. I have tried various methods but nothing seems to be working. Even though it may be a simple task, as a beginner in Bootstrap, I am currently workin ...

htmltwitter-bootstrapcssflexbox

Creating an interactive date selection feature with a calendar icon in MVC 5

I currently have a textbox that displays the datepicker when clicked. However, there is now a requirement to add a calendar icon inside the textbox. The datepicker should be displayed when either the calendar icon or the textbox is clicked. Below is the co ...

javascriptjqueryhtmlcssdatepicker

What occurs when Render() is called during animation in React?

Curious about how React handles rendering during a component's animation? Let's explore an example where a component is re-rendered due to a state change triggered during its animation. Imagine a scenario where a component's animation lasts ...

javascripthtmlcssreactjsreact-transition-group

Leveraging Flexbox and flexGrow in conjunction with Textfield

I am looking to use Flexbox to separate my components on the screen in a way that positions them correctly. I have 3 rows with textfields that need specific ratios related to the full width: row 1 : 2, 1, 1 row 2 : 1, 1 row 3 : 1, 1, 2 I attempted to ach ...

cssflexboxmaterial-ui

Adjusting the dimensions of a div to accommodate varying text lengths

I'm currently facing an issue where I have multiple divs all sharing the same "Text" class. These divs don't have set width or height values, and are adjusting based on the content inside them, which varies in width. The problem arises when other ...

javascriptcss

How to retrieve a nested array element in JavaScript

Here is the Pastebin link of the index.html file for reference: http://pastebin.com/g8WpX6Wn (The file contains broken image links and no CSS styling). If you would like to access the entire project, you can download the zip file. I am currently working ...

javascriptjqueryhtmlarraysfor-loop

Combining the p class with flexbox for optimal layout design

I have four flexed container boxes and I am looking to add text below them in a row. Does anyone have suggestions on how I can achieve this alignment, as well as tips for optimizing the code? .container { display: flex; flex-direction: row; just ...

htmlcsstextflexbox

animation frames delay for intervals

Can the animation-delay be applied not just at the start but also during iterations? For instance, consider this example: .lv1 { width: 200px; height: 200px; background: red; animation: flu 1s infinite; animation-delay: 2s; } .lv2 { backgro ...

csscss-animations

Having trouble selecting elements that have been dynamically generated through an Ajax callback function

During an AJAX callback, I am trying to insert a DIV with a unique ID into another specific DIV called A. However, after each call, if the div with the given id is not found as a child element of DIV A, a new DIV is created and appended. Strangely, every t ...

javascriptjqueryhtmlajax

HTML card experiencing overlapping problem

I have a website with three columns using Bootstrap that contain images, each with a button in the center. I added a dialog window that should appear when a user clicks on a button within an image. However, the dialog window appears behind the columns and ...

javascriptjqueryhtmlcss

Creating a floating div that remains in place without disturbing the layout of the surrounding elements on

I am trying to place a div within a page at specific coordinates without affecting the rest of the content on the page. My initial approach was to give the parent container a position: absolute and the floating div a position: relative, then setting the p ...

htmlcss

Place the image at the bottom of its parent div without using absolute positioning

Is there a way to place an <img> element at the bottom of its parent <div> without using position: absolute or position-absolute class while maintaining the design integrity? Using absolute positioning disrupts the entire layout I have created ...

htmlcssimagebootstrap-4

Achieving a border around the text within a UL element

I am currently working on styling a menu using a UL. However, I encountered an issue where adding a border makes it extend across the whole screen due to the li elements being set to display: block. I do not want to specify a fixed width for these elements ...

htmlcsshtml-listsblock

elements that do not reside within a div with a float style

I am struggling with a basic CSS layout issue. I have a div container with content that I am trying to divide into two sections using the float property. Despite applying the float to the elements within the div, they do not stay inside as expected. https ...

htmlcss