How to create round shape corner box in HTML

« **on:** July 09, 2009, 09:32:53 AM »

Hi,

I want to create round shape corner box using HTML. I couldn't see any in-built HTML tag to create it. Do it need to use CSS to create round shape corner in HTML?

Thanks,

w3school

« **Reply #1 on:** December 03, 2009, 12:23:12 AM »

Yes, you will require to use CSS to create round shape corner. Create four images to display the corner and use CSS to load them.

Kailash

« **Reply #2 on:** February 17, 2010, 03:18:04 PM »

Many ways you can make rounded corners....the html, the css, ps ways. You can to see what you are capable of really. I would personally go with PS and do it quickly with the pen tool!

« **Reply #3 on:** April 14, 2010, 02:49:33 PM »

If you are trying to draw a rectangle with rounded edges, then what you will need to do is, in your toolbox (the window with all the tools on the left) find the rectangle tool, and right click on it. It should then give you a drop down of different shape tools. Select the tool called "Rounded Rectangle Tool". Then goto your image, and click and drag to your heart's desire.

« **Reply #4 on:** May 17, 2010, 01:21:57 PM »

Quote

Hi,

I want to create round shape corner box using HTML. I couldn't see any in-built HTML tag to create it. Do it need to use CSS to create round shape corner in HTML?

Thanks,

w3school

Hi,
In W3school, this code is not available. In this code, at least four corner images are involved. I found actual code for you across these links:

1) ww.webdevelopersnotes.com/tips/html/html_table_tutorial_rounded_corners.php3

2) ww.dynamicdrive.com/style/csslibrary/item/css3_rounded_corners_using_border_radius/

In the first link, you can get html based code and in the second link you can get the appropriate CSS based code.

« **Reply #5 on:** July 31, 2010, 03:29:20 AM »

Making rounded corners involves a operational information of HTML tables and for that you can refer to the in-depth HTML table class. If you are previously familiar with the variety of tags linked with HTML tables and their attributes, you can go ahead and dig right into this tip else, I would recommend that you first read the HTML table tutorial in the higher HTML lesson.

« **Reply #6 on:** March 10, 2011, 11:42:48 AM »

You can go the hard way and use photoshop and create corners or you can use nifty corners which will make the corners for you. There is also a more difficult solution: creating a box with all rounded corners, then editingits shape and changing the type of each corner node.

« **Reply #7 on:** April 03, 2013, 04:17:27 PM »

We can create round shape corner box, but this is the simply code to create round shape corner box in HTMLby CSS. <div class="bl"><div class="br"><div class="tl"><div class="tr">Lorem ipsum dolor sit amet consectetur adipisicing elit</div></div></div></div>.

« **Reply #8 on:** August 11, 2014, 09:12:07 PM »

Quote from: littonbarney on April 03, 2013, 04:17:27 PM

We can create round shape corner box, but this is the simply code to create round shape corner box in HTMLby CSS. <div class="bl"><div class="br"><div class="tl"><div class="tr">Lorem ipsum dolor sit amet consectetur adipisicing elit</div></div></div></div>.

This is not a complete code. It is missing data from CSS. You are using class="bl" etc. and you will have to define them in your CSS file.

« **Reply #9 on:** August 25, 2014, 04:15:02 PM »

@littonbarney, That is the correct way i think.

« **Reply #10 on:** November 05, 2014, 01:15:52 PM »

Thanks friends for your info

« **Reply #11 on:** November 25, 2014, 07:29:21 PM »

You will create the circle by using the CSS tag, use the border radius property that allows web site designers to easily draw a circle. Like using the below tag:-
" {
border-radius: 15px;
}"

Topic: How to create round shape corner box in HTML (Read 15999 times)

w3school

How to create round shape corner box in HTML

Kailash

Re: How to create round shape corner box in HTML

lahmanwokard

Re: How to create round shape corner box in HTML

polardhanry

Re: How to create round shape corner box in HTML

StevenJr

Re: How to create round shape corner box in HTML

born

Re: How to create round shape corner box in HTML

jrgkristal

Re: How to create round shape corner box in HTML

littonbarney

Re: How to create round shape corner box in HTML

Web_news

Re: How to create round shape corner box in HTML

AndreaStevenesen

Re: How to create round shape corner box in HTML

preethipriti

Re: How to create round shape corner box in HTML

MurielCalzada

Re: How to create round shape corner box in HTML