Borders
Borders are decorative lines that wrap around the padding and content of HTML elements, appearing between an element’s padding and margin. They provide visual separation and emphasis, helping to define the boundaries of elements on a webpage. Borders can be styled with different widths, colors, and line styles to create various visual effects.
CSS borders are essential for creating visually appealing layouts and improving user interface design. They are commonly used for buttons, form elements, cards, containers, image frames, navigation menus, and table styling. Borders help establish visual hierarchy, separate content sections, and guide user attention to important elements.
Syntax
/* Shorthand property */
border: <width> <style> <color>;
Parameters:
width
: Specifies the thickness of the border (e.g., 1px, 2em, thin, medium, thick)style
: Defines the line style - must be specified for border to appear (solid, dotted, dashed, double, groove, ridge, inset, outset, none, hidden)color
: Sets the border color using any valid CSS color value
Return value:
This is a CSS declaration, not a function, so it doesn’t return a value but rather applies a visual style.
Borders vs Outlines
Feature | Borders | Outlines |
---|---|---|
Space | Take up space in the layout | Do not take up space |
Box Model | Part of the CSS box model | Drawn outside the element |
Individual Sides | Can style each side differently | Cannot style sides individually |
Curved Corners | Can be curved with border-radius | Cannot be curved |
Layout Impact | Affect element’s total dimensions | Do not affect layout or positioning |
Primary Use | Visual styling and design | Accessibility (focus indicators) |
Clickable Area | Included in element’s clickable area | Not included in clickable area |
Example: Basic Border Styling
The following example demonstrates how to apply basic border styles to elements.
/* Basic solid border */.basic-border {border: 2px solid #333;padding: 15px;margin: 10px;}/* Different border styles */.dotted-border {border: 3px dotted #ff6b6b;padding: 10px;}.dashed-border {border: 2px dashed #4ecdc4;padding: 10px;}.double-border {border: 5px double #45b7d1;padding: 10px;}
The following HTML code is the structure for the above CSS:
<!DOCTYPE html><html lang="en"><head><link rel="stylesheet" href="style.css" /></head><body><div class="basic-border">This element has a solid black border</div><div class="dotted-border">This element has a dotted red border</div><div class="dashed-border">This element has a dashed teal border</div><div class="double-border">This element has a double blue border</div></body></html>
The output of this code will be:
The above example shows different border styles applied to div elements. The solid border creates a clean, professional look, while dotted and dashed borders add visual interest. The double border creates a more decorative effect suitable for highlighting important content.
Frequently Asked Questions
1. Why isn’t my border showing up?
The most common reason is that the border style is not set. You must specify a style like solid
, dotted
, or dashed
in the border property for it to appear.
2. Can I apply borders to only certain sides of an element?
Yes, you can use individual properties like border-top
, border-right
, border-bottom
, and border-left
to apply borders to specific sides only.
3. What’s the difference between border: none
and border: 0
?
border: none
removes the border style, while border: 0
sets the border width to zero. Both effectively remove the border visually.
4. Can I make borders with rounded corners?
Yes, use the border-radius
property along with your border to create rounded corners on bordered elements.
5. How do I create a border that changes on hover?
Use the :hover
pseudo-class: .element:hover { border: 2px solid #color; }
. For smooth transitions, add a transition
property.
Borders
- border
- Shorthand property that sets different properties for an elements border in a single declaration.
- border-bottom
- Shorthand property that defines the width, color, and style of the bottom border of an element.
- border-color
- Sets the color of the border. The default value is the current element color.
- border-left
- Shorthand property that defines the width, color, and style of the left border of an element.
- border-radius
- Rounds the corners of an element.
- border-right
- Shorthand property that defines the width, color, and style of the right border of an element.
- border-style
- Sets the style of the border. The default value is none.
- border-top
- Shorthand property that defines the width, color, and style of the top border of an element.
- border-width
- Shorthand property that sets the width for the overall border of an element or for each side individually.
Contribute to Docs
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.
Learn CSS on Codecademy
- Career path
Front-End Engineer
Front-end engineers work closely with designers to make websites beautiful, functional, and fast.Includes 34 CoursesWith Professional CertificationBeginner Friendly115 hours - Free course
Learn CSS
In this CSS tutorial, you’ll learn how to add CSS to visually transform HTML into eye-catching sites.Beginner Friendly6 hours