How to make child div border overlay corner of parent div border?

Question

I'm trying to make a box like the image shown.

enter image description here

But the border of my smaller box is sitting inside the bigger box, rather than sitting on top of the big boxes border.

I need to make it so the small pink "chicken" box is sitting right on top of the upper right corner of the big grey box.

<!DOCTYPE html>
<html>
    <head>
        <title>Coursera Assignment 1</title>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="css/styles.css">
        <style type="text/css">
            * {
                box-sizing: border-box;
                margin:0px;
                font-family: Helvetica, Arial, sans-serif;
                line-height: 1.3;
            }
            h2.chicken {
                background-color: #D59898;
                border: 2px solid black;
                text-align: center;
                width: 100px;
                margin: 0px 10px 0px 0px;
                float: right;
                margin-right: 0px;
            }
            div.chicken {
                background-color: grey;
                border: 2px solid black;
                width: 30%;
                position: relative;
            }
            p.chicken {
                clear: right;
                padding: 10px;
            }
        </style>
    </head>
    <body>
        <h1>Our Menu</h1>
        <div class="chicken">
            <h2 class="chicken">Chicken</h2>
            <p class="chicken">Spacing: Pay attention to the spacing shown in the mockup illustrations. Note the spacing between sections (both horizontal and vertical). Note the horizontal spacing between the edges of the section and the edges of the browser window. Also, note the spacing between the dummy text in each section and the edges of the section. Lastly, make sure the dummy text is "pushed down" enough so it</p>
        </div>
    </body>
</html>

It's a simple, set to smaller box border-left and bottom, right and top will be taken from parent :) — Milos N., Jan 20 '21 at 20:53
Thanks I actually tried this orginally but using the wrong technique of border: 0px 0px 2px 2px; Thanks for showing me the right way to do it! — Carl Murray, Jan 20 '21 at 20:57
just add `border-right: 0` and `border-top: 0` to `h2.chicken` — s.kuznetsov, Jan 20 '21 at 21:00

G-Cyrillus · Answer 1 · 2021-01-20T21:14:16.493

2 easy options:

Note: borders from parent parent and child do not collapse like it would inside a table-layout, they need to be removed ... 101 issue.

do not draw top right borders (if colors are the same)

<!DOCTYPE html>
<html>

<head>
  <title>Coursera Assignment 1</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="css/styles.css">

  <style type="text/css">
    * {
      box-sizing: border-box;
      margin: 0px;
      font-family: Helvetica, Arial, sans-serif;
      line-height: 1.3;
    }
    
    h2.chicken {
      background-color: #D59898;
      border: 2px solid black;
      border-top:none;
      border-right:none;
      text-align: center;
      width: 100px;
      margin: 0px 10px 0px 0px;
      float: right;
      margin-right: 0px;
    }
    
    div.chicken {
      background-color: grey;
      border: 2px solid black;
      width: 30%;
      position: relative;
    }
    
    p.chicken {
      clear: right;
      padding: 10px;
    }
  </style>
</head>

<body>

  <h1>Our Menu</h1>


  <div class="chicken">
    <h2 class="chicken">Chicken</h2>
    <p class="chicken">Spacing: Pay attention to the spacing shown in the mockup illustrations. Note the spacing between sections (both horizontal and vertical). Note the horizontal spacing between the edges of the section and the edges of the browser window. Also, note
      the spacing between the dummy text in each section and the edges of the section. Lastly, make sure the dummy text is "pushed down" enough so it</p>
  </div>




</body>

</html>

use box-shadow instead (if colors can happen to be different)

<!DOCTYPE html>
<html>

<head>
  <title>Coursera Assignment 1</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="css/styles.css">

  <style type="text/css">
    * {
      box-sizing: border-box;
      margin: 0px;
      font-family: Helvetica, Arial, sans-serif;
      line-height: 1.3;
    }
    
    h2.chicken {
      background-color: #D59898;
      box-shadow: 0 0 0 2px blue ;
      text-align: center;
      width: 100px;
      margin: 0px 10px 0px 0px;
      float: right;
      margin-right: 0px;
    }
    
    div.chicken {
      background-color: grey;
      border: 2px solid black;
      width: 30%;
      position: relative;
    }
    
    p.chicken {
      clear: right;
      padding: 10px;
    }
  </style>
</head>

<body>

  <h1>Our Menu</h1>


  <div class="chicken">
    <h2 class="chicken">Chicken</h2>
    <p class="chicken">Spacing: Pay attention to the spacing shown in the mockup illustrations. Note the spacing between sections (both horizontal and vertical). Note the horizontal spacing between the edges of the section and the edges of the browser window. Also, note
      the spacing between the dummy text in each section and the edges of the section. Lastly, make sure the dummy text is "pushed down" enough so it</p>
  </div>




</body>

</html>

score -1 · Answer 2 · answered Jan 20 '21 at 20:57

Use negative margins:

    margin: -10px -10px 0px 0px;

Full code:

        * {
            box-sizing: border-box;
            margin:0px;
            font-family: Helvetica, Arial, sans-serif;
            line-height: 1.3;
        }

        h2.chicken {
            background-color: #D59898;
            border: 2px solid black;
            text-align: center;
            width: 100px;
            margin: -10px -10px 0px 0px;
            float: right;
        }

        div.chicken {
            background-color: grey;
            border: 2px solid black;
            width: 30%;
            position: relative;
        }

        p.chicken {
            clear: right;
            padding: 10px;
        }

    <h1>Our Menu</h1>


<div class="chicken">
    <h2 class="chicken">Chicken</h2>
    <p class="chicken">Spacing: Pay attention to the spacing shown in the mockup illustrations. Note the spacing between sections (both horizontal and vertical). Note the horizontal spacing between the edges of the section and the edges of the browser window. Also, note the spacing between the dummy text in each section and the edges of the section. Lastly, make sure the dummy text is "pushed down" enough so it</p>
</div>

there is no need of a a negative margins, just remove the borders which can not collapse with parents border,. — G-Cyrillus, Jan 20 '21 at 21:00
@G-Cyrillus I would argue those are both equally effective ways of accomplishing the task. Removing the borders from the collapsed sides is probably a *bit* better because it's a *bit* more semantic, but that's splitting hairs I feel like :-) — TylerH, Jan 20 '21 at 21:02
@TylerH negative margin needs to cure a previous unneeded rule ;) , make it simple as much as possible is my point of view. *there is no IE6 around to justify counter rules* We also have position:relative or transform to move it , then var() CSS can be usefull so no need to reset offset value of margin/top/right/translate() if border size is modified ;) — G-Cyrillus, Jan 20 '21 at 21:08
I was answering the question: to have the box on top, with negative margins it is possible to have the full border of the chicken in another color, depends on what it the design goal. — ceyquem, Jan 20 '21 at 22:53

How to make child div border overlay corner of parent div border?

2 Answers2