What is the inner border in css

In CSS, the inner border is set using the box-sizing attribute. You only need to add the "box-sizing:border-box;" style to the element. The value of the box-sizing attribute is border-box, which means that the specified width and height determine the element border.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Let’s first look at an example of setting the inner border with css.

  
    
    
  
 
 

  
    

      
普通边框！！
      
内边框！！
    
  

box-sizing property

The box-sizing property allows you to define specific elements that match a certain area in a specific way.

For example, if you need to place two bordered boxes side by side, you can do this by setting box-sizing to "border-box". This causes the browser to render a box with the specified width and height, and put the borders and padding into the box.

Syntax

box-sizing: content-box|border-box|inherit;

Property values:

content-box: This is the behavior of width and height specified by CSS2.1. Specifying the element's width and height (min/max properties) applies to the box's width and height. Padding and border layout and drawing of elements except specified width and height

border-box: Specifying width and height (min/max properties) determines the element border. That is, specifying the width and height of an element includes padding and border. The width and height of the content are obtained by subtracting the border and padding from the set width and height respectively.

inherit: Specifies the value of the box-sizing attribute, which should be inherited from the parent element.

Example:

  
    
    
  
 
 
  
    

      
这个 div 占据了左边的一半。
      
这个 div 占据了右边的一半。
    
  

Rendering:

The above is the detailed content of What is the inner border in css. For more information, please follow other related articles on the PHP Chinese website!