Search code examples
htmlcsswebhtml4

Rounded border without border-radius

I'm developing a website using with HTML4, CSS2. so I can't use border-radius property. How can I create <div> or <table> what has rounded border?

Thank you in advance.

Solution

  • Found something related. Reference - LINK

    .b1,
.b2,
.b3,
.b4 {
  font-size: 1px;
  overflow: hidden;
  display: block;
}

.b1 {
  height: 1px;
  background: #888;
  margin: 0 5px;
}

.b2 {
  height: 1px;
  border-right: 2px solid #888;
  border-left: 2px solid #888;
  margin: 0 3px;
}

.b3 {
  height: 1px;
  border-right: 1px solid #888;
  border-left: 1px solid #888;
  margin: 0 2px;
}

.b4 {
  height: 2px;
  border-right: 1px solid #888;
  border-left: 1px solid #888;
  margin: 0 1px;
}

.contentb {
  border-right: 1px solid #888;
  border-left: 1px solid #888;
}

.contentb div {
  margin-left: 5px;
}
    <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="contentb">
  <div>Round Border!!</div>
</div>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>