How to Make Div Rounded and Bordered Boxes in CSS Code
Web developers use CSS (Cascading Style Sheets) as a method of applying visual effects to Web pages. As the capabilities of CSS expand, developers can discard more of their image hacks and other clumsy techniques in exchange for code-only visual effects. Rounded corners, introduced as part of CSS level 3 (CSS3), represent one of these advances. Without difficult image slicing and awkward coding, you can apply round corners to any HTML element, including divs. When you add a border to the rounded div, you will also see the border becomes rounded.
Other People Are Reading
Instructions
-
-
1
Open an HTML file in Notepad or a code editor and check that the code includes "<style>" tags:
<style type="text/css">
</style>
Add these tags if you do not find them in the code.
-
2
Open an HTML file in Notepad or a code editor and check that the code includes "<style>" tags:
<style type="text/css">
</style>
Add these tags if you do not find them in the code.
-
-
3
Go to your "<style>" tags and add a style rule for the box:
#box {
}
Change "box" to the ID name you found inside the "<div>" tags. Always prefix your ID names with hash symbols in CSS.
-
4
Add the "border-radius" property to your style rule:
#box {
border-radius: 25px;
}
This code creates a 25 pixel border radius for every corner of the div. You can specify individual corners using properties named "border-top-left-radius" and so on.
-
5
Give your box a border using the "border" property:
#box {
border-radius: 25px;
border: 10px solid purple;
}
This is a short-hand property that takes three values: width, style and color. Use color names, hexadecimal codes or RGBa (Red, Green, Blue, Alpha) codes to set the colors for borders. Set the width of the border to a value smaller than the border radius to keep inner corners rounded.
-
1
Tips & Warnings
Change the shape of a curve by adding a second value to "border-radius." The first value becomes the length of the curve while the second becomes the height: "border-radius: 25px / 50px;"
