Member Avatar for sreein1986

Hi,
is it posible to make table round in HTML using CSS ???

  • 2 Contributors
  • 5 Replies
  • 151 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by macneato

Dani AI

Generated

Yes — you can get rounded corners on a table with CSS. If you meant "rounded corners" (as later confirmed), two reliable approaches are: give the table a rounded container (best if you use border-collapse: collapse inside) or apply corner radii to the four corner cells. 's image-slice technique is a valid old-school fallback; below are concise CSS-first solutions that work in modern browsers.

Wrapper approach (most forgiving):

/* put the table inside <div class="round-wrap">...</div> */
.round-wrap {
  display: inline-block;
  border-radius: 10px;
  overflow: hidden;       /* clips table contents to the rounded corners */
  border: 1px solid #ccc;
}
.round-wrap table {
  border-collapse: collapse;
  width: 100%;
}

Corner-cell approach (no wrapper):

table.rounded {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 10px;               /* some browsers honor this directly */
  background-clip: padding-box;      /* prevents background bleeding at corners */
}

/* target the four corner cells for precise radii */
table.rounded tr:first-child th:first-child,
table.rounded tr:first-child td:first-child {
  border-top-left-radius: 10px;
}
table.rounded tr:first-child th:last-child,
table.rounded tr:first-child td:last-child {
  border-top-right-radius: 10px;
}
table.rounded tr:last-child td:first-child {
  border-bottom-left-radius: 10px;
}
table.rounded tr:last-child td:last-child {
  border-bottom-right-radius: 10px;
}

Notes and gotchas:

  • If table cell borders are visible you may see seams; either remove cell borders or let the table carry the outer border.
  • border-collapse: collapse can interfere with rounding on the table element; use the wrapper or target corner cells instead.
  • For truly circular shapes (not just rounded corners), use a square block with border-radius: 50% (tables are rectangular by default).
  • Older IE (<9) lacks border-radius — use image corners or a polyfill if you need that support. For reference on syntax and browser support, see MDN's border-radius documentation.

Recommended Answers

All 5 Replies

Member Avatar for macneato

Hi,

Do you mean rounded corners?

Member Avatar for sreein1986

yes,
i want corners ...

Member Avatar for sreein1986

i want the css code

Member Avatar for macneato

Don't be ridiculous! CSS3 Only supports rounded corners markup!

And if you too lazy to read not even 30 lines of text teaching you how to do it! Whats the point of me pasting it here, because you wont want to read that either.

Anyway, Heres the CSS. Figure it out!

.roundcont {
	width: 250px;
	background-color: #f90;
	color: #fff;
}

.roundcont p {
	margin: 0 10px;
}

.roundtop { 
	background: url(tr.gif) no-repeat top right; 
}

.roundbottom {
	background: url(br.gif) no-repeat top right; 
}

img.corner {
   width: 15px;
   height: 15px;
   border: none;
   display: block !important;
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.