How to Make an Oval Text Box on CSS

As a general rule, text boxes on Web pages are rectangular in shape, most often wider than tall. This shape makes sense because when you type a paragraph of text, it reads better inside a rectangle. Applying a 50 percent border radius to a text box will change its shape to an oval, if you want to break out of the box. The text will still appear as normal, but the shape surrounding it will become oval or, if you set the width and height equal to each other, circular.

Instructions

1. Open the source code for your Web page by loading its HTML file in Notepad or a code editor. Find the text box code:

   <textarea id=”myoval”></textarea>

   Add an ID name name, as shown, if there is not yet an ID for this text box. You will need this to write your CSS code.

2. Open the CSS stylesheet file for your website and scroll to the bottom. Add a style rule that targets the text box by its ID name:

   #myoval {
   }

3. Set the width and the height of the text box inside the style rule:

   #myoval {
   width: 400px;
   height: 200px;
   }

   When creating an oval out of the text box, make the width and height different enough so it is visibly more long than wide or more wide than long.

4. Turn of the text box's default border:

   #myoval {
   border: 0;
   }

   You can also specify a new border:

   border: 3px solid black;

5. Apply a border radius of 50 percent to the text box:

   #myoval {
   border: 0;
   border-radius: 50%;
   }

   Elements with equal width and height will become circles. A text box with a rectangular shape will become an oval.

Tips & Warnings

• Add plenty of padding using “padding: XXpx” where “XX” is the number of pixels you want to add around the text.