iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

CSS Borders

By · Reviewed & last updated · Part of CSS Tutorial

The border property draws a line around an element. It's a shorthand for three sub-properties: width, style, and color.

Border styles

solid dashed dotted double rounded corners
Fig 1. A few common border styles. The same shorthand handles all of them.

Shorthand and longhand

FormExampleNotes
Shorthandborder: 2px solid #04AA6D;The usual choice. Sets all four sides at once.
Per sideborder-top: 1px solid #ddd;Same shorthand, restricted to one side.
Per propertyborder-width: 2px;
border-style: dashed;
border-color: red;		Useful when you only want to change one piece.
Rounded cornersborder-radius: 8px;Not part of the border shorthand — set separately.
Note: Without a border-style, the browser draws nothing — even if width and color are set. Style is mandatory.

Example

Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>

<h1>CSS Borders</h1>
<div class="box">Edit the CSS on the left, then click Run &raquo;</div>

</body>
</html>
Try it Yourself »

Exercise

Add a 2px solid green border in shorthand form.

.card { border: 2px #04AA6D; }

Test yourself

Q1. Which sub-property is required for a border to appear?
Q2. Which shorthand sets all three border parts at once?
Q3. Which property rounds an element's corners?

Discussion

Loading…