---
title: "表格边框的css语法整理"
url: "https://yjyj.net/learn/3818.html"
author: "小 虾 (生猛大蝦编辑部)"
published_at: "2005-12-13T20:21:31+08:00"
updated_at: "2005-12-13T20:21:31+08:00"
categories: "招数学习"
tags: "CSS布局技巧, 前端开发实战, 网页视觉设计"
summary: "这篇文章系统整理了表格边框相关的 CSS 语法，覆盖 border-width、border-color、border-style 以及四个方向的边框写法，适合想把表格边框做得更精细的人快速查用。读完能直接掌握各属性的用途、取值和略写规则，少走样式调试弯路。"
source: "生猛大蝦 (https://yjyj.net)"
---

# 表格边框的css语法整理

> 来源：[生猛大蝦 (yjyj.net)](https://yjyj.net/learn/3818.html) · 作者：小 虾 · 发布时间：2005-12-13

## 30 秒核心看点 (TL;DR)

- 一次梳理表格边框相关 CSS：宽度、颜色、样式和四边单独控制都讲清楚。
- border-style 是关键，只有先定义可见样式，边框才会真正显示出来。
- 想省代码就用略写属性；想精细控制，就拆成上下左右分别设置。

我们知道Dreamweaver在表格制作方面做得非常出色，但是在某些时候还是必须结合css才能达到一些特定效果，下面我们先把有关表格边框的css语法整理出来，然后另外介绍怎样用css美化表格的边框。
　　有关表格边框的css语法
　　具体内容包括：上边框宽度、右边框宽度、下边框宽度、左边框宽度、边框宽度、边框颜色、边框样式、上边框、下边框、左边框、右边框、边框、宽度、高度、有关标签等。
　　 1.上边框宽度
　　语法: border-top-width: 
　　允许值: thin | medium | thick | 
　　初始值: medium
　　适用于: 所有对象
　　向下兼容: 否
　　上边框宽度属性用于指定一个元素上边框的宽度。值可以是三个关键字其中的一个，都不受字体大小或长度的影响，可以用于实现成比例的宽度。不允许使用负值。也可以用在上边框、边框的宽度或边框的属性略写。
　　2.右边框宽度
　　语法: border-right-width: 
　　允许值: thin | medium | thick | 
　　初始值: medium
　　适用于: 所有对象
　　向下兼容: 否
　　右边框宽度属性用于指定元素的右边框的宽度。值可以是三个关键字其中的一个，都不受字体大小或长度的影响，可以用于实现成比例的宽度。不允许使用负值。也可以用在右边框、边框的宽度或边框的属性略写。
　　 3.下边框宽度
　　语法: border-bottom-width: 
　　允许值: thin | medium | thick | 
　　初始值: medium
　　适用于: 所有对象
　　向下兼容: 否
　　下边框宽度属性用于指定元素的下边框的宽度。值可以是三个关键字其中的一个，都不受字体大小或长度的影响，可以用于实现成比例的宽度。不允许使用负值。也可以用在下边框、边框的宽度或边框的属性略写。
　　 4.左边框宽度
　　语法: border-left-width: 
　　允许值: thin | medium | thick | 
　　初始值: medium
　　适用于: 所有对象
　　向下兼容: 否
　　左边框宽度属性用于指定元素的左边框的宽度。值可以是三个关键字其中的一个，都不受字体大小或长度的影响，可以用于实现成比例的宽度。不允许使用负值。也可以用在左边框、边框的宽度或边框的属性略写。
　　5.边框宽度
　　语法: border-width: 
　　允许值: [ thin | medium | thick |  ]
　　初始值: 未定义
　　适用于: 所有对象
　　向下兼容: 否
　　边框宽度属性用一到四个值来设置元素的边界，值是一个关键字或长度。不允许使用负值长度。如果四个值都给出了，它们分别应用于上、右、下和左边框的式样。如果给出一个值，它将被运用到各边上。如果两个或三个值给出了，省略了的值与对边相等。 这个属性是上边框宽度、右边框宽度、下边框宽度和左边框宽度属性的略写。也可以使用略写的边框属性。
　　6.边框颜色
　　语法: border-color: 
　　允许值: 
　　初始值: 颜色属性的值
　　适用于: 所有对象
　　向下兼容: 否
　　边框颜色属性设置一个元素的边框颜色。可以使用一到四个关键字。如果四个值都给出了，它们分别应用于上、右、下和左边框的式样。如果给出一个值，它将被运用到各边上。如果两个或三个值给出了，省略了的值与对边相等。也可以使用略写的边框属性。
　　7.边框样式
　　语法: border-style: 
　　允许值: [ none | dotted | dashed | solid | double | groove | ridge | inset | outset ]
　　初始值: none
　　适用于: 所有对象
　　向下兼容: 否
　　边框样式属性用于设置一个元素边框的样式。这个属性必须用于指定可见的边框。可以使用一到四个关键字。如果四个值都给出了，它们分别应用于上、右、下和左边框的式样。如果给出一个值，它将被运用到各边上。如果两个或三个值给出了，省略了的值与对边相等。也可以使用略写的边框属性。
　　none：无样式；
　　dotted：点线；
　　dashed：虚线；
　　solid：实线；
　　double：双线；
　　groove：槽线；
　　ridge：脊线；
　　inset：内凹；
　　outset：外凸。
　　8.上边框
　　语法: border-top: 
　　允许值:  ||  || 
　　初始值: 未定义
　　适用于: 所有对象
　　向下兼容: 否
　　上边框属性是一个用于设置一个元素上边框的宽度、式样和颜色的略写。注意只能给出一个边框式样。也可以使用略写的边框属性。
　　9.右边框
　　语法: border-right: 
　　允许值:  ||  || 
　　初始值: 未定义
　　适用于: 所有对象
　　向下兼容: 否
　　右边框属性是一个用于设置一个元素右边框的宽度、式样、和颜色的略写。注意只能给出一个边框式样。也可以使用略写的边框属性。　　
　　10.下边框
　　语法: border-bottom: 
　　允许值:  ||  || 
　　初始值: 未定义
　　适用于: 所有对象
　　向下兼容: 否
　　下边框属性是一个用于设置一个元素的下边框的宽度、式样和颜色的略写。注意只能给出一个边框式样。也可以使用略写的边框属性。
　　11.左边框
　　语法: border-left: 
　　允许值:  ||  || 
　　初始值: 未定义
　　适用于: 所有对象
　　向下兼容: 否
　　左边框属性是一个用于设置一个元素左边框的宽度、式样和颜色的略写。注意只能给出一个边框式样。也可以使用略写的边框属性。
　　 12.边框
　　语法: border: 
　　允许值:  ||  || 
　　初始值: 未定义
　　适用于: 所有对象
　　向下兼容: 否
　　边框属性是一个用于设置一个元素边框的宽度、式样和颜色的略写。
　　边框声明的例子包括：
　　H2 { border: groove 3em }
　　A:link { border: solid blue }
　　A:visited { border: thin dotted #800080 }
　　A:active { border: thick double red }
　　边框属性只能设置四种边框；只能给出一组边框的宽度和式样。为了给出一个元素的四种边框的不同的值，网页制作者必须用一个或更多的属性，如：上边框、右边框、下边框、左边框、边框颜色、边框宽度、边框式样、上边框宽度、右边框宽度、下边框宽度或左边框宽度。
　　13.宽度
　　语法: width: 
　　允许值:  |  | auto
　　初始值: auto
　　适用于: 块级和替换元素
　　向下兼容: 否
　　宽度属性的初始值为“auto”，即为该元素的原有宽度(有就是元素自己的宽度)。百分比参考上级元素的宽度。不允许使用负的长度值。
　　14.高度
　　语法: height: 
　　允许值:  | auto
　　初始值: auto
　　适用于: 块级和替换元素
　　向下兼容: 否
　　高度属性的初始值为“auto”，即为该元素的原有高度(有就是元素自己的高度，)。百分比参考上级元素的宽度。不允许使用负的长度值。
　　15.有关标签
　　table：表格标签，对整个表格样式的定义要放在table中；
　　td：单元格标签，对单元格样式的定义要放在td中。

## 延伸问答与排错指南 (FAQ)

### 表格边框的 CSS 该从哪些属性入手？
先掌握 border-width、border-color、border-style 这三类基础属性，再看 border-top/right/bottom/left 及其略写形式。前者负责宽度、颜色和样式，后者负责按方向精细控制，适合做表格边框的局部调整。

### 为什么设置了边框宽度却看不见？
因为边框是否可见，通常还要配合 border-style。文章里明确提到，边框样式属性用于设置可见边框；如果样式是 none，即使设置了宽度和颜色，也可能看不到边框效果。

### border-width 和单独四边属性有什么区别？
border-width 是上、右、下、左边框宽度的略写，可一次设置一到四个值；单独四边属性则能分别控制某一边。前者适合统一风格，后者适合做局部强调或不对称边框。

---
更多 Linux 运维、WordPress 性能优化、前端工程化、Shopify 独立站与极客折腾指南：[生猛大蝦全站文章归档 (https://yjyj.net/archive)](https://yjyj.net/archive)