友友们，关于css盒子模型border-width部分，前端初学者遇到问题希望友友们能够帮助解惑
这是别人做出来的显示效果
这是别人写的语言
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
div{
width: 50px;
height:50px;
margin:5px;
}
.brd1{
border-width:2px;
border-style:solid;
border-color:red;
}
.brd2{
border:2px solid red;
}
.brd3{
border-bottom:1px solid red;
}
.line {
height:1px;
width:500px;
border-top:1px solid #e5e5e5;
}
style>
head>
<body>
<div class="brd1">div>
<div class="brd2">div>
<div class="brd3">div>
<div class="line">div>
body>
html>
这是我做出来的显示效果：
这是我写的语言（没有写完）：
html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>bordertitle>
<style>
#box{width:50px;
height:50px;
margin:5px;
}
.one{border-width:2px;
border-style:solid;
border-color:red;
}
.two{border-width:2px;
border-style:solid;
border-color:red;
}
.three{border-bottom:1px solid red;}
style>
head>
<body>
<div id="box">
<div class="one">div>
<div class="two">div>
<div class="three">div>
<div class="four">div>
div>
body>
为了达到别人做出来呈现一样的效果，我在像素上都跟别人写的一模一样，但是我还是不太明白为什么我设置出来效果是不同的。
问题1：border-width这个属性设置它不是应该是上右下左四个宽度吗？我的代码中对于border-width的设置为2px，呈现效果不应该是一个正方形吗？
问题2：别人写的语言中，css代码 .line部分的height和width中我尝试过把他们删掉，然后将border-top的像素大小改动过，改动的效果呈现出来有以下情况：
要想达到别人做的line部分，就必须加width。 请问这是为什么呐？
/因为在尽量让自己把问题说的清楚一点，所以篇幅较长，谢谢友友们耐心看完，麻烦大家了/div{
width: 50px;
height:50px;
margin:5px;
}
上边的这段，给所有的div都设置宽、高和内外边距
#box{width:50px;
height:50px;
margin:5px;
}
上边的这段，给父盒子设置了宽、高和内外边距，子盒子（one、two、three、four）并没有宽高
修改办法：
1、#box 改成div
2、删除掉box的样式设置，给没个子盒子设置宽高
例如 .one{
width: 50px;
height:50px;
margin:5px;
border-width:2px;
border-style:solid;
border-color:red;
}
1、要设置宽度，你设置的border-width也是上下左右的边框宽度啊，盒子的大小还是需要自身的宽度设置或者内容撑起。
至于你的效果和别人的不一样是因为：
你看他给div标签设置的宽高，同时生效在每个盒子上，也就是说别人一开始就给盒子设置了宽高。
你的是给父盒子设置宽高，怎么可能生效在每个子盒子上面？（建议你看看css的继承，关于宽度是可以沿用的，高度不行）
2、你的line沿用#box的宽度，是50px，你再了解一下css的层叠性，直接设置它自己的就可以覆盖沿用的宽度了