Make rounded corners for nested div
Question
I'm trying to make a rounded corners for my responsive table using div but the top part of the div isn't being rounded.
This is how my current preview looks like:
Full code: http://jsfiddle.net/ajt98kqy/
My HTML structure:
<div class="coltable">
<div class="col">
<h4>Name</h4>
<p>John</p>
</div>
<div class="col">
<h4>Title</h4>
<p>Manager</p>
</div>
What I want to achieve is rounded corner (top border isn't rounded yet). How can I fix this?
4 answers
solution1
3 ACCPTED 2018-09-26 14:06:47
Your inner content is currently overflowing and is visible. You need to add the CSS property overflow: hidden .
So it will be like:
.coltable {
....
overflow: hidden;
}
In this way no matter how many inner items you add it will always be rounded at the top and bottom.
solution2
2 2018-09-26 13:56:16
You need to round the h4 element depending on which column it is in. For example:
.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; // add this to your code
}
.coltable .col:last-child h4 {
border-radius: 0 10px 0 0;
}
The values represent each corner, starting from the top left and going around clockwise.
I've targeted the right column by using last-child pseudo; if you add an extra 3rd column, it will still work.
Here is an updated fiddle: http://jsfiddle.net/ajt98kqy/3/
solution3
0 2018-09-26 14:00:20
If you are using Bootstrap 4, you can add the class "rounded" to your div.
e.g "<div class="coltable rounded">
Otherwise you can use the style "border-radius" by doing either of the following.
Inline styling:
<div class="coltable" style="border-radius: 5px;">
External Styling:
CSS :
.rounded{
border-radius: 5px; // This will round every side of your border.
}
HTML :
<div class="coltable rounded">
Remember if you are using external CSS, you will have to link to your css file in the
<head> tag of your document.
<link rel="stylesheet" href="path/to/file/nameofcssfile.css">
solution4
-1 2018-09-26 14:07:27
Add overflow: hidden; into .coltable class.
Your div .col class is overlaping your .coltable div.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.