9 Border to DIV Element in HTML Examples


Post Banner

In this Tutorial, we will see ways in which we can add borders to div elements in HTML Style attributes border and border-style,

Example 1: Solid Border

Some text

Code:
<div style="border:1px solid">Some text</div>

Example 2: Solid Border with color

Some text

Code:
<div style="border:1px solid #00ff22">Some text</div>

Example 3: Dotted Border with color

Some text

Code:
<div style="border:1px dotted red">Some text</div>

Example 4: Dashed Border with color

Some text

Code:
<div style="border:1px dashed red">Some text</div>

Example 5: Double Border

Some text

Code:
<div style="border-style:double">Some text</div>

Example 6: Groove Border

Some text

Code:
<div style="border-style: groove">Some text</div>

Example 7: Ridge Border

Some text

Code:
<div style="border-style: ridge">Some text</div>

Example 8: Inset Border

Some text

Code:
<div style="border-style: inset">Some text</div>

Example 9: Outset Border

Some text

Code:
<div style="border-style: outset">Some text</div>


Have Questions? Post them here!
Advertisements
Try Out Code2care Dev Tools:

Advertisements

Advertisements
Code2care is an initiative to publish and share varied knowledge in programming and technical areas gathered during day-to-day learnings and development activities.

Students and software developers can leverage this portal to find solutions to their various queries without re-inventing the wheel by referring to our easy to understand posts. Technical posts might include learnings, tutorials, trouble-shooting steps, video tutorials, code snippets, how-to, blogs, articles, etc.

🎉 We are celebrating the 10th years of Code2care! Thank you for all your support!

We strongly support Gender Equality & Diversity.