Place the content within rounded corner box

Question

What is the right way to place the content inside the box div with rounded corners so it wouldn't overlap?

enter image description here

Blue box is the content div which is inside the white box parent div. I want the header to be within that parent box so that it has rounded corners at the top as well.

When I tried "overflow: hidden;" on parent box, content (blue box) just went down:

enter image description here

.WhiteBox {
  box-sizing: border-box;
  color: rgb(17, 17, 17);
  max-width: 340px;
  background-color: rgb(255, 255, 255);
  box-shadow: rgba(118, 143, 255, 0.1) 0px 16px 24px 0px;
  padding-bottom: 30px;
  margin: 65px auto 45px;
  border-radius: 12.5px;
}

.BlueBox {
  background-color: rgb(50, 116, 186);
  height: 35px;
}

don't set a `width` to your containers and it should size to match the content within it. — Doug, Oct 25 '18 at 19:53
you faced a margin collpasing that you fixed with oveflow:hidden ... so remove the margin-top from the header — Temani Afif, Oct 25 '18 at 19:54
Seems to work fine. You'll have to play with padding a bit. https://jsfiddle.net/isherwood/zdsqwoyh/ — isherwood, Oct 25 '18 at 20:06
@isherwood here is his real issue : https://jsfiddle.net/zdsqwoyh/3/ .. remove/add overflow to see what is happening — Temani Afif, Oct 25 '18 at 20:20
Apparently I misunderstood. Apologies. (And he seems to be a her.) — isherwood, Oct 25 '18 at 20:21

score 1 · Answer 1 · answered Oct 25 '18 at 20:49

Specific CSS Properties

If you want border-radius for less than 4 corners, then you need to use specific properties:

border-top-right-radius: 12.5px;
border-top-left-radius: 12.5px;

Demo

body {
  background: #000;
}

.wbox {
  box-sizing: border-box;
  color: rgb(17, 17, 17);
  max-width: 340px;
  background-color: rgb(255, 255, 255);
  box-shadow: rgba(118, 143, 255, 0.1) 0px 16px 24px 0px;
  padding-bottom: 30px;
  margin: 65px auto 45px;
  border-radius: 12.5px;
}

.bbox {
  background-color: rgb(50, 116, 186);
  height: 35px;
  border-top-right-radius: 12.5px;
  border-top-left-radius: 12.5px;
}

<section class='wbox'>
  <div class='bbox'></div>
</section>

Place the content within rounded corner box

1 Answers1

Specific CSS Properties

Demo