How to draw a circle css

Question

I have following table:

   <table>
     <tr role="row" class="even">
        <td>Other Color</td>
        <td class="Green">Green<td/>
     </tr>
    </table>

and want to draw green circle in last column. CSS:

.Green{
    font-size:0px;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display:inline-block;
    background: green!important;
    border:solid black 3px;}
td {
   border:solid black 3px;}

I need to draw borders for the cell, but when doing so it is drawing border around the circle, not the cell. https://fiddle.jshell.net/Ulee/up3a5fp4/
any tip?

Well, the cell is the circle and so what else were you expecting :) Put another element inside the td and make it as the circle if you don't want the cell to be a circle. — Harry
– Harry, Commented Mar 23, 2016 at 8:38

NiZa · Accepted Answer · 2016-03-23 09:00:27Z

4

Something like this?

.green:after {
  content: "";
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: inline-block;
  background: green!important;
  vertical-align: middle;
}

.green {
  font-size: 0;
}

td {
  border: 3px solid #000;
}

<table>
  <tr role="row" class="even">
    <td>Other Color</td>
    <td class="green">Green</td>
  </tr>
</table>

edited Mar 23, 2016 at 9:00

answered Mar 23, 2016 at 8:39

NiZa

3,9361 gold badge24 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

WebCoder · Accepted Answer · 2016-03-23 08:59:19Z

0

css:

.Green{
   border:solid green 3px;
   font-size:0px;
   border-radius: 50%;
   width: 50px;
   height: 50px;
   display:inline-block;
   background: green!important;  
}
td {
  border:solid black 3px;
}

And your html contain a little mistake, your html is: <td/>, but the correct format is: </td>

answered Mar 23, 2016 at 8:59

WebCoder

1

Collectives™ on Stack Overflow

How to draw a circle css

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related