How to Design a CSS Website & Borders
CSS borders are evolving with the CSS scripting language. CSS borders have several different styles, including solid, dotted, dashed, double borders and, with CSS 3, rounded corners. CSS and borders are defined for any in element in the .html file or in a separate linked .css file. The code is the same regardless of where you put it. To design a web site using CSS with borders, you need a text editor that will save plain text files.
Other People Are Reading
Instructions
-
-
1
Create an .html file by opening the text editor and clicking on "File", and "New". Click on "Save" and save the file as index.html.
-
2
Add the basic HTML to the web page. This is the HTML that tells the web browser that the file is a web page. For example:
<html>
<head>
<title>My Page</title>
</head>
<body></body>
</html> -
-
3
Create a box with borders by adding a DIV tag and entering the text you want in the box. In the example, the DIV tag will go between the BODY tags:
<html>
<head>
<title>My Page</title>
</head>
<body>
<div>
This is my page. You are welcome to view it.
</div>
</body>
</html> -
4
Add the CSS to the DIV tag using the style element. Use the CSS border element to create a border around the text. The border element takes color, type and size into account. For example:
<html>
<head>
<title>My Page</title>
</head>
<body>
<div style="border: 5px solid #000000;">
This is my page. You are welcome to view it.
</div>
</body>
</html>The border is 5 pixels wide, and there is a solid black line around the text in the DIV tag. A hex code is used to make the border black. Hex codes may be obtained by using a color picker program. Alternatively you could replace the solid property with dotted, dashed, double, grooved, ridged, inset or outset. Round corners require the border-radius element from CSS 3 however it is not supported by all browsers yet. For example:
<div style="border: 2px dotted #000000; border-radius: 9px;">
This will round the border's corners by 9 pixels.
-
1
References
- Photo Credit BananaStock/BananaStock/Getty Images
