Home >Web Front-end >CSS Tutorial >How to set the inner border in css
Method: First use the border attribute in the element to define the border; then use the "box-sizing:border-box" statement to set the inner border. The box-sizing attribute is used to define certain elements in a certain way to fit within a specified area; when the value is set to "border-box" the inner border can be defined.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
css setting inner border
In CSS, you can use the border attribute together with the box-sizing attribute to add an inner border.
The border attribute is used to add a border
The box-sizing attribute is used to define certain elements in a certain way to fit in the specified area; Set the property value to the border-box value to add an inner border.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div.container {
width: 30em;
border: 1em solid;
}
div.box1 {
width: 50%;
border: 1em solid red;
float: left;
}
div.box2 {
box-sizing: border-box;
-moz-box-sizing: border-box;
/* Firefox */
width: 50%;
border: 1em solid red;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="box1">普通边框！！</div>
<div class="box2">内边框！！</div>
</div>
</body>
</html>Rendering:
Description: box-sizing attribute
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.
Property value:
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. Pad and border layout and drawing of elements except specified width and height
border-box: Specify width and height (min/max properties) to determine 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.
(Learning video sharing: css video tutorial)
The above is the detailed content of How to set the inner border in css. For more information, please follow other related articles on the PHP Chinese website!