Divi WordPress Theme

How to create round shape corner box in HTML

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

Offline w3school

  • New Member
  • *
  • Posts: 26
  • iTrader: +0/-0
    • View Profile
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
VPS Hosting - AccuWebHosting

Offline Kailash

  • Web Hosting Master
  • *****
  • Administrator
  • Posts: 603
  • iTrader: +153/-0
    • View Profile
Re: How to create round shape corner box in HTML
« 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

Offline lahmanwokard

  • Newbie
  • *
  • Posts: 3
  • iTrader: +0/-0
    • View Profile
Re: How to create round shape corner box in HTML
« 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!

Offline polardhanry

  • Newbie
  • *
  • Posts: 3
  • iTrader: +0/-0
    • View Profile
Re: How to create round shape corner box in HTML
« 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.

Offline StevenJr

  • New Member
  • *
  • Posts: 14
  • iTrader: +0/-0
    • View Profile
Re: How to create round shape corner box in HTML
« 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.

Offline born

  • New Member
  • *
  • Posts: 13
  • iTrader: +0/-0
    • View Profile
Re: How to create round shape corner box in HTML
« 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.

Offline jrgkristal

  • Newbie
  • *
  • Posts: 5
  • iTrader: +0/-0
    • View Profile
Re: How to create round shape corner box in HTML
« 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.

Offline littonbarney

  • New Member
  • *
  • Posts: 11
  • iTrader: +0/-0
    • View Profile
Re: How to create round shape corner box in HTML
« 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>.

Offline Web_news

  • New Member
  • *****
  • Premium Member
  • Posts: 44
  • iTrader: +5/-0
    • View Profile
Re: How to create round shape corner box in HTML
« Reply #8 on: August 11, 2014, 09:12:07 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.
« Last Edit: August 11, 2014, 10:48:11 PM by Kailash »

Offline AndreaStevenesen

  • Newbie
  • *
  • Posts: 1
  • iTrader: +0/-0
    • View Profile
Re: How to create round shape corner box in HTML
« Reply #9 on: August 25, 2014, 04:15:02 PM »
@littonbarney, That is the correct way i think. :)

Offline preethipriti

  • Newbie
  • *
  • Posts: 7
  • iTrader: +0/-0
    • View Profile
Re: How to create round shape corner box in HTML
« Reply #10 on: November 05, 2014, 01:15:52 PM »
Thanks friends for your info
« Last Edit: November 05, 2014, 02:59:36 PM by Kailash »

Offline MurielCalzada

  • New Member
  • *
  • Posts: 11
  • iTrader: +0/-0
    • View Profile
Re: How to create round shape corner box in HTML
« 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;
}"
Divi WordPress Theme
Tags: