CSS设置div边框颜色宽度和高度步骤如下：
1、新建一个html文件，创建一个类名为wrap的div。
2、先通过css类选择器选择到div来控制div的宽度和高度和背景颜色（没有边框时方便看出来div的大小）。
3、通过div 的border属性控制边框颜色，设置border的宽度为2px，线型为实线，颜色为蓝色。
4、这样就可以设置div边框颜色宽度和高度，如下图：
扩展资料：
css border属性：
border 简写属性在一个声明设置所有的边框属性。
可以按顺序设置如下属性：
border-width，border-style，border-color
如果不设置其中的某个值，也不会出问题，比如 border:solid #ff0000也是允许的。
可以采用一下两种方法来自动调节栾杜问题。1、使用百分比来实现自动适应宽度。
可以设置宽度的值为百分比，如
width=“80%”
此时宽度就是其父元素的80%宽度。
2、可以采用是js获取屏幕的宽度，以实现宽度随不同分辨率来改变。
先关函数方法如下：
网页可见区域宽 document.body.clientWidth
网页可见区域高 document.body.clientHeight
网页可见区域宽(包括边线的宽) document.body.offsetWidth
网页可见区域高(包括边线的宽) document.body.offsetHeight
网页正文全文宽 document.body.scrollWidth
网页正文全文高 document.body.scrollHeight
网页被卷去的高 document.body.scrollTop
网页被卷去的左 document.body.scrollLeft
网页正文部分上 window.screenTop
网页正文部分左 window.screenLeft
屏幕分辨率的高 window.screen.height
屏幕分辨率的宽 window.screen.width
屏幕可用工作区高度 window.screen.availHeight
屏幕可用工作区宽度 window.screen.availWidth
对于没有设置宽度的元素、亦或CSS样式非内嵌式的，js原生写法可以通过offsetWidht来获取宽度即：document.getElementById("#id").offsetWidth
ps:对于设置了CSS样式的元素（内联、内嵌、外联）offsetWidth 也都可以获得值
所以，jquery的width()与js的offsetWidth都可以获取元素的宽度，但有个区别：
.width()的值单纯是内容区域的宽度、不包括内外补丁和border。ie6+和chrome相同。
offsetWidth ：包括了内补丁和border，不包括外补丁。ie6+和chrome相同
