css border corner joint and cut

css border property seems easy to use. “border:1px solid red;” will draw a border of 1-pixel thick solid red color around a block. But think a little further, you may have some questions:

Is the border drawn inside a block or outside a block, i.e., does the css width/height property include the border width? The answer is the border is drawn outside a block and the width/height property does not include the border width. So,

<div style="width:200px;height:200px;border:40px solid red;background-color:green;"></div>

will drawn an area of 240*240 size, the inner part of which is a blue block of 200*200 size surrounded by a red border of 40px thickness.

The border property is the shortcut for border-top,border-right, border-bottom, and border-left. So the above example is equivalent to the following code:

<div style="width:200px;height:200px;border-top:40px solid red;border-right:40px solid red;border-bottom:40px solid red;border-left:40px solid red;background-color:green;"></div>

What is the color of the border corners if the top/right/bottom/left corners have different colors? The color of a corner is not the color of either border that joints, but cut to two-halves by the diagonal which take the colors of the two borders, respectively. So the following code:

<div style="width:200px;height:200px;background-color:#00ff00;border-top: 40px solid blue;border-right: 40px solid red;border-left: 40px solid red;border-bottom: 40px solid blue;">

will draw the following picture:

Using this kind of border corner joints, we can create some interesting effects, e.g., a folded-down corner of a page:

<html>
<head>
<title>myprogrammingnotes.com</title>
<style>
  .div::before {
    position: absolute;
    top: 0; right: 0;
    content: "";
    border-top: 40px solid white;
    border-left: 40px solid red;
  }
</style>
</head>
<body>
  <div class="div" style="position: relative;padding:0px;background-color:#00ff00;width:200px;height:200px;">
  </div>
</body>
</html>

The effect is as follows:

Here, we use a ::before pseudo element which has an empty content. So, the pseudo element has only borders and has no content. The pseudo element is positioned to the top-right corner of the parent div block. It has a white top border and a red left border. The joint of the top border and the left border forms the folded-down corner of a page.

The last thing worth mention about the border property is that a border can have transparent color, in which case the block color will be used as the color of the border extending to the corner area.

Did you like this?
Tip admin with Cryptocurrency