In HTML, there are two distinct methods to include a border:
- By utilizing the Inline Style attribute
- By employing Internal CSS
Using Inline Style attribute
To incorporate a border in an HTML element utilizing the inline style attribute, adhere to the following guidelines. By following these instructions, users can effortlessly implement a border.
To begin, the initial step involves entering the HTML code into a text editor or accessing an already existing HTML file within the preferred text editor to apply the inline property for border addition.
<!Doctype Html>
<Html>
<Head>
<Title>
Add the border using inline property
</Title>
</Head>
<Body>
<h1> Hello User </h1>
<h2> Your are at C# Tutorial Site </h2>
</Body>
</Html>
Step 2: Next, position the cursor within the start tag of the specific text where the border is intended to be applied. Subsequently, the style attribute must be entered, followed by specifying the border property within the style attribute, as exemplified in the subsequent code snippet:
<h1 style="border:"> Hello User!!! </h1>
Step 3: Next, it is necessary to specify the border color within the border property.
<h1 style="border:orange;"> Hello User!!! </h1>
Step 4: It is possible to specify the style and width of the border that needs to be included in the Html code. To incorporate this, the border-width and border-style properties should be defined immediately after the border property.
<h1 style="border:orange; border-width:5px; border-style:solid;"> Hello User!!! </h1>
Step 5: Finally, save the HTML file and proceed to execute it in a web browser.
<!Doctype Html>
<Html>
<Head>
<Title>
Add the border using inline property
</Title>
</Head>
<Body>
<font style="border:blue; border-width:10px; border-style:outset;">
C# Tutorial </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 C# Tutorial Site!.... </h2>
</center>
</Body>
</Html>
The HTML code displayed in the screenshot above illustrates the output.
Using Internal CSS
To apply a border in HTML using Internal CSS, follow the steps outlined below. By following these instructions, users can effortlessly implement a border design.
To begin, the initial step involves entering the Html code into a text editor or accessing the current Html file within the text editor of choice to implement Internal CSS for border addition.
<!Doctype Html>
<Html>
<Head>
<Title>
Add the border using internal CSS
</Title>
</Head>
<Body>
Example
<center>
Hello User!!!
Your are at C# Tutorial Site!....
</center>
</Body>
</Html>
Step 2: The next step involves positioning the cursor within the head tag of the HTML document to specify the styles within the designated <style> tag, which is illustrated in the subsequent code block. Subsequently, proceed to input the border attribute properties within the ID selector.
<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>
Step 3 involves saving the file and subsequently executing it in the web browser.
<!Doctype Html>
<Html>
<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>
<Body>
Example
<center>
<h1> Hello User!!! </h1>
<h2> Your are at C# Tutorial Site!.... </h2>
</center>
</Body>
</Html>
The result of the HTML code above is displayed in the screenshot below: