0

I'm learning the box model in CSS and am confused why when dotted-border is applied the border inherits the color of the content background color?

In the snippet below, shouldn't the dotted border be a color combination of black and light blue since the box model suggests that a border goes around the padding and content? Instead orange and black are shown.

I'm struggling to understand how the content background color is shown? Apologies if my explanation is confusing but help will be appreciated.

body {

    background-color: lightblue;
}

.content {

  background-color: #fdad5c;
  padding:0px;
  border: 5px dotted black;
  margin: 0px;


}
<body>

<div class = 'content'> Content  </div>

</body>
mendokusai
  • 165
  • 1
  • 3
  • 13

1 Answers1

1

I know what you mean. But borders in CSS are always using the space of the element, in which they are. That's why in your example, the dotted line is "inside" the yellow box and not outside.

An alternative to borders would be the outline attribute, which in your example would be outside the yellow box.

Further information: https://www.tutorialrepublic.com/css-tutorial/css-outline.php

JKD
  • 1,279
  • 1
  • 6
  • 26