Home > Article > Web Front-end > How to add inner border in css3

How to add inner border in css3

王林Original: 2020-11-19 11:52:562555browse

How to add inner borders in css3: You can add inner borders by using the border attribute and box-sizing attribute, such as [box-sizing:border-box;]. The box-sizing attribute allows certain properties to be defined in a way to fit within a specified area.

The operating environment of this tutorial: windows7 system, css3 version. This method is suitable for all brands of computers.

css3 Add inner border

Related properties:

The border property allows you to specify the style and color of an element's border.

The box-sizing property allows you to define certain elements in a way to fit within a specified area.

(Learning video sharing: css video tutorial)

Grammar:

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

Attribute 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. The element's padding and border layout and drawing specify the width and height except
border-box Specify the width and height (minimum/maximum attributes) 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.
inherit Specifies the value of the box-sizing attribute, which should be inherited from the parent element

Code implementation:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
div.container
{
	width:30em;
	border:1em solid;
}
div.box
{
	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="box">这个 div 占据了左边的一半。</div>
<div class="box">这个 div 占据了右边的一半。</div>
</div>

</body>
</html>

Achievement effect ：

How to add inner border in css3

Related recommendations: CSS tutorial

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

css css3 继承内边距 padding border

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to set image outline with cssNext article：How to set image outline with css

See more

How to add inner border in css3

Related articles