CSS Border

Overview

In web development a CSS Border serves as a design feature that determines how an elements border appears. It enables developers to customize the color, thickness and design of the border surrounding an HTML element. Through CSS Border designers have the flexibility to craft anything from lines to designs to enhance the visual appeal of a webpage. By utilizing attributes such, as border color, border width and border style developers can establish borders that're solid dotted, dashed or tailored to their preferences.

Different Types of Borders in CSS

In CSS, various border styles can be applied to elements. Common border types include:

1. Solid

A solid line around the element.

border-style: solid;


2. Dashed

A series of short dashes.

border-style: dashed;


3. Dotted

A series of small dots.

border-style: dotted;


4. Double

Two parallel lines.

border-style: double;


5. Groove, Ridge, Inset, and Outset

These styles create a 3D effect by shading or highlighting the border.

• Groove appears carved into the page.
• Ridge creates a raised effect.
• Inset adds a sunken look.
• Outset gives a raised appearance.‍


border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;

6. Hidden

Hides the border entirely.

border-style: hidden;


7. None

Removes the border.

border-style: none;


By combining these styles, developers can create unique border designs for different sides of an element.

Basics of CSS Border Properties

Understanding the Border Property

The CSS border property sets an element's border's appearance, including width, style, and color.

Setting Border Width

The border-width property defines the border's thickness. It can use specific measurements like pixels or keywords like thin, medium, or thick.

border-width: 2px;


Setting Border Style

The border-style property specifies the type of border.

border-style: solid;


Setting Border Color

The border-color property sets the border's color using color names, hex codes, RGB, RGBA, HSL, or HSLA values.

border-color: red;


Using Shorthand Properties for Borders

The border shorthand property allows setting the width, style, and color in one line.

border: 1px solid red;


Advanced CSS Border Properties

Applying Dotted Borders

Use the border-style property with the value dotted to create dotted borders.

border-style: dotted;


Using the Border-Image Property

The border-image property allows using an image as a border. Define the image URL, slice values, and repeat behavior.

border-image: url("border.png") 30 stretch;


Adding Rounded Corners with Border-Radius

The border-radius property creates rounded corners. Higher values create more rounded edges. It can take one to four values to apply different curvatures to each corner.

border-radius: 10px;


Customizing Borders with Pseudo-Elements

Pseudo-elements like ::before and ::after can add custom styles and elements to parts of an HTML element. They allow creating decorative borders without extra HTML.

.custom-border::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: blue;
}