Create curved edges for the divs inside other divs

Question

Create curved edges for the divs inside other divs

I am currently working on creating rounded corners for my responsive table using div elements. However, I am encountering an issue where the top part of the div is not being rounded as expected.

Here is a preview of my current progress: https://i.sstatic.net/bpj8D.png

If you want to see the full code, you can check it out here: http://jsfiddle.net/ajt98kqy/

This is the structure of my HTML:

<div class="coltable">
<div class="col">
    <h4>Name</h4>
    <p>John</p>
</div>
<div class="col">
    <h4>Title</h4>
    <p>Manager</p>
</div>

My goal is to have rounded corners on all sides (the top border is currently not rounded). How can I go about fixing this issue?

html css

Answer 1

Answer №1

Your inner content is spilling out and easily seen. To fix this, you should include the CSS rule overflow: hidden.

Here's how your code should look:

.coltable {
....
overflow: hidden;
}

By doing this, regardless of how much content you add, it will always remain contained within the confines at the top and bottom.

Answer 2

Your inner content is spilling out and easily seen. To fix this, you should include the CSS rule overflow: hidden.

Here's how your code should look:

.coltable {
....
overflow: hidden;
}

By doing this, regardless of how much content you add, it will always remain contained within the confines at the top and bottom.

Answer 3

Answer №2

To make the h4 element rounded based on its column, you can modify the CSS like this:

.coltable .col h4 {
    margin: 0;
    padding: .75rem;
    border-bottom: 2px solid #dee2e6;
    background-color: blue;
    padding-left: 40px;
    color: #fff;
    border-radius: 10px 0 0 0; /* include this line in your code */
}

.coltable .col:last-child h4 {
  border-radius: 0 10px 0 0;
}

The values in the border-radius property represent each corner of the element, starting from the top left and going around clockwise.

I specifically targeted the last column using the last-child pseudo-class so that the styling will still apply even if you add an additional column.

You can see these changes in action in the updated fiddle here: http://jsfiddle.net/ajt98kqy/3/

Answer 4

To make the h4 element rounded based on its column, you can modify the CSS like this:

.coltable .col h4 {
    margin: 0;
    padding: .75rem;
    border-bottom: 2px solid #dee2e6;
    background-color: blue;
    padding-left: 40px;
    color: #fff;
    border-radius: 10px 0 0 0; /* include this line in your code */
}

.coltable .col:last-child h4 {
  border-radius: 0 10px 0 0;
}

The values in the border-radius property represent each corner of the element, starting from the top left and going around clockwise.

I specifically targeted the last column using the last-child pseudo-class so that the styling will still apply even if you add an additional column.

You can see these changes in action in the updated fiddle here: http://jsfiddle.net/ajt98kqy/3/

Answer 5

Answer №3

To achieve rounded corners in Bootstrap 4, simply add the "rounded" class to your div element.

For example: "<div class="coltable rounded">

If you are not using Bootstrap 4, you can still create rounded corners with the CSS property "border-radius." Here are two ways to do it:

Inline Styling:

<div class="coltable" style="border-radius: 5px;">

External Styling:

In your CSS file:

.rounded{
    border-radius: 5px; // This will round every side of your border.
}

In your HTML file:

<div class="coltable rounded">

If you opt for external CSS, remember to link to your stylesheet in the <head> tag of your document:

<link rel="stylesheet" href="path/to/file/nameofcssfile.css">

Answer 6

To achieve rounded corners in Bootstrap 4, simply add the "rounded" class to your div element.

For example: "<div class="coltable rounded">

If you are not using Bootstrap 4, you can still create rounded corners with the CSS property "border-radius." Here are two ways to do it:

Inline Styling:

<div class="coltable" style="border-radius: 5px;">

External Styling:

In your CSS file:

.rounded{
    border-radius: 5px; // This will round every side of your border.
}

In your HTML file:

<div class="coltable rounded">

If you opt for external CSS, remember to link to your stylesheet in the <head> tag of your document:

<link rel="stylesheet" href="path/to/file/nameofcssfile.css">

Answer 7

Answer №4

To prevent overlap, include the CSS rule overflow: hidden; in the .coltable class.

The elements styled with the .col class are currently overlapping those within the .coltable div.

Answer 8

To prevent overlap, include the CSS rule overflow: hidden; in the .coltable class.

The elements styled with the .col class are currently overlapping those within the .coltable div.

Create curved edges for the divs inside other divs

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

How to create interactive SVG animations on hover

Problem with delaying in Jquery's .each method

Generate a responsive list with a pop-up feature under each item (using Vue.js)

Change the destination of an iFrame upon user click

Adding a linear gradient with a fade effect to Highcharts sparkline chart: Step by step guide

The min-height property in Bootstrap 3 causes a div element to not expand as expected

Tips for aligning the child elements of a dropdown menu to stick with the parent's top position

Sequence of HTML elements arranged in a stack

Modify the color of the chosen value on the sidebar using Angular 6

Vue component always renders a new line

The steps to properly load "child.vue" into the correct position within "parent.vue" are as follows

Using Bootstrap CSS and JavaScript specifically for carousel functionality

Navigating Django's Pagination feature alongside nested tabs requires a combination of careful planning

The functionality of JQuery fails to work properly when receiving an AJAX response

Endless rotation with stunning magnification feature

Enhanced memory allocation for JavaScript clients

What are the steps to creating a traffic light that operates automatically?

Implement CSS styling within XML responses in jQuery UI autocomplete

LESS: mastering the dumpLineNumbers function

Creating a Triangle Slider Component with React and Material-UI (MUI)