如何在HTML中添加边框？
在HTML中，我们可以使用以下两种不同的方式添加边框：
使用内联样式属性
使用内部CSS
使用内联样式属性
如果我们想在
HTML 中添加边框使用内联样式属性，那么我们按照以下步骤进行操作。使用这些步骤，任何用户都可以轻松创建边框。
第1步：在文本编辑器中键入Html代码，要在其中使用inline属性添加边框的文本编辑器。
<!Doctype Html>
<Html>
<Head>
<Title>
Add the border using inline property
</Title>
</Head>
<Body>
<h1> Hello User </h1>
<h2> Your are at Lidihuo Site </h2>
</Body>
</Html>
第2步：添加style属性，并写入具体的border样式，如以下块所示：
<h1 style="border:"> Hello User!!! </h1>
第3步：然后，在border属性中指定边框颜色。
<h1 style="border:orange;"> Hello User!!! </h1>
第4步：我们还可以在HTML代码中提供要添加的边框的
样式和宽度。如果要添加，则在
border 属性之后输入
border-width 和
border-style 属性。
<h1 style="border:orange; border-width:5px; border-style:solid;"> Hello User!!! </h1>
第5步：保存HTML文件，然后在浏览器中运行。
<!Doctype Html>
<Html>
<Head>
<Title>
Add the border using inline property
</Title>
</Head>
<Body>
<font style="border:blue; border-width:10px; border-style:outset;">
Lidihuo </font>
<center>
<h1 style="border:orange; border-width:5px; border-style:solid;"> Hello User!!! </h1>
<h2 style="border:green; border-width:8px; border-style:dashed"> Your are at Lidihuo Site!.... </h2>
</center>
</Body>
</Html>
上述HTML代码的输出显示在以下屏幕截图中：
使用内部CSS
如果我们要在HTML中使用内部CSS，那么我们遵循以下步骤。使用这些步骤，任何用户都可以轻松创建边框。
第1步：首先，我们在任何文本编辑器中键入Html代码，或在导航栏中打开现有的Html文件。文本编辑器，我们要在其中使用内部
CSS来添加边框。
<!Doctype Html>
<Html>
<Head>
<Title>
Add the border using internal CSS
</Title>
</Head>
<Body>
Lidihuo
<center>
Hello User!!!
Your are at Lidihuo Site!....
</center>
</Body>
</Html>
第2步：现在，我们将光标放在Html文档的head标签中，然后在
<style> 标记，如以下块所示。然后将border属性的属性键入id选择器。
<Head>
<Title>
Add the border using internal CSS
</Title>
<style type="text/css">
h1 {
border-color: blue;
border-width: .25em;
border-style: double;
}
h2 {
border-color: orange;
border-width: 5px;
border-style: inset;
}
</style>
</Head>
第3步：最后，我们保存文件，然后在浏览器中运行文件。
<!Doctype Html>
<Html>
<Head>
<Title>
css 添加边框
</Title>
<style type="text/css">
h1 {
border-color: blue;
border-width: .25em;
border-style: double;
}
h2 {
border-color: orange;
border-width: 5px;
border-style: inset;
}
</style>
</Head>
<Body>
Lidihuo
<center>
<h1> 您好同学 ! ! ! </h1>
<h2> 欢迎访问立地货站点 !.... </h2>
</center>
</Body>
</Html>
上述HTML代码的输出显示在以下屏幕截图中：
