how to draw round line in html

Question

1.00/5 (1 vote)

See more:

HI everyone,

i want the round shape line in my table.i search in google ,i found as follows.but how to use it i am confused??
i want to use this code in my table:

XML

<svg height="80" width="300">
  <g fill="none" stroke="black" stroke-width="6">
    <path stroke-linecap="round" d="M5 40 l215 0" />
   </g>
  </svg>

i have the table as follows:

XML

<table width="600"  cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="" style="margin-top:1%">
<tr>
<td align="center">
 <p3 class="center">────────── Lets begin ──────────</p3>
</td>
</tr>
</table>

Posted 2-Nov-15 2:42am

R Harshal

Add a Solution

Comments

Krunal Rohit 2-Nov-15 9:05am

You can do it using CSS only.

border: solid 1px #f90;
border-radius: 50%;
height:50px;
width:50px

-KR

[no name] 2-Nov-15 9:11am

i dont want the curved shape.i want the round to the line

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Varun Sriram · Answer 1 · 2015-11-02T02:58:00

Solution 1

XML

<table width="600"  cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="" style="margin-top:1%">
<tr>
<td align="center">
 <p3 class="center"><svg height="80" width="300">
  <g fill="none" stroke="black" stroke-width="6">
    <path stroke-linecap="round" d="M5 40 l215 0" />
   </g>
  </svg> Lets begin<svg height="80" width="300">
  <g fill="none" stroke="black" stroke-width="6">
    <path stroke-linecap="round" d="M5 40 l215 0" />
   </g>
  </svg></p3>
</td>
</tr>
</table>

Posted 2-Nov-15 2:58am

Varun Sriram

Comments

[no name] 2-Nov-15 10:05am

how can i give round shape to end of the line(considering for both the lines.)

Sergey Alexandrovich Kryukov 2-Nov-15 10:31am

Replace first </svg> with <svg>.
—SA

[no name] 2-Nov-15 10:46am

if i replace with <svg>. its gives me one single line which i dont want. i want both lines it should be curve from end point that is starting point and ending point.
the answer from varun is right but problem is i want curve shape from one point to another point for both the lines that is before Lets begin and after Lets Begin.Please let me know.

[no name] 2-Nov-15 10:47am

if i replace with with <svg>
the answer from varun is right but problem is i want curve shape from one point to another point for both the lines that is before Lets begin and after Lets Begin.Please let me know.

[no name] 2-Nov-15 10:43am

the answer from varun is right but problem is i want curve shape from one point to another point for both the lines that is before Lets begin and after Lets Begin.Please let me know.

Sergey Alexandrovich Kryukov 2-Nov-15 10:52am

Excuse me... Is it another decoration of "let's begin", similar to the line on left and right of it?
—SA

[no name] 2-Nov-15 11:11am

sorry i did not get you.
what i exactly need is :
i have a two line. Between two line i have the word lets begin.so basically line has one start point and one end point so now for first line, i want curve shape at start point and on end point for first line.same as for second line. i think now the question is clear for all my friends.please do let me know.

Sergey Alexandrovich Kryukov 2-Nov-15 12:22pm

Sorry, I don't want to participate in this. It look so pointless to me, a sheer waste of time. You keep trying the same pointless purely decorative stuff from question to question. Who is going to benefit from that? Sorry, but if you have nothing better to do, you can get time to learn SVG to all file detail all by yourself.

Thank you for understanding.

—SA

**Debojyoti Saha** · Answer 2 · 2015-11-02T03:22:00

Use the code for round shape

XML

<table width="600"  cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="" style="margin-top:1%">
<tr>
<td align="center">
  <svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="red" stroke-width="3" fill="white" />
</svg>
</td>
</tr>
</table>

of
follow the link
http://www.w3schools.com/svg/svg_circle.asp[^]