How to Add A Border to an Element In CSS?

10 minutes read

To add a border to an HTML element using CSS, you can use the border property. The border property allows you to define the width, style, and color of the border.


Here is the general syntax for adding a border in CSS:

1
2
3
selector {
  border: [width] [style] [color];
}


Let's break down each part:

  1. selector: This specifies the HTML element to which you want to add the border. It can be a class, ID, or HTML tag.
  2. width (optional): This sets the width of the border. It can be a specific value like pixels (px), points (pt), or percentages (%), or one of the following preset values: thin medium thick
  3. style (optional): This defines the style of the border. It can be one of the following: none: No border is displayed. dotted: The border is a series of dots. dashed: The border is a series of short dashes. solid: The border is a solid line. double: The border is a double line. groove: The border appears as engraved. ridge: The border appears as embossed. inset: The border makes the element appear embedded. outset: The border makes the element appear raised.
  4. color (optional): This sets the color of the border. It can be any valid CSS color value such as a named color, hexadecimal code, RGB, RGBA, HSL, or HSLA value.


Here's an example of adding a red dashed border to a <div> element:

1
2
3
div {
  border: 2px dashed red;
}


In this example, the border has a width of 2 pixels, a dashed style, and a red color.


You can adjust the values according to your requirements and apply this technique to any HTML element.

Best HTML & CSS Books to Read in 2024

1
Web Design with HTML, CSS, JavaScript and jQuery Set

Rating is 5 out of 5

Web Design with HTML, CSS, JavaScript and jQuery Set

2
HTML and CSS QuickStart Guide: The Simplified Beginners Guide to Developing a Strong Coding Foundation, Building Responsive Websites, and Mastering ... Web Design (QuickStart Guides™ - Technology)

Rating is 4.9 out of 5

HTML and CSS QuickStart Guide: The Simplified Beginners Guide to Developing a Strong Coding Foundation, Building Responsive Websites, and Mastering ... Web Design (QuickStart Guides™ - Technology)

3
HTML, CSS, and JavaScript All in One: Covering HTML5, CSS3, and ES6, Sams Teach Yourself

Rating is 4.8 out of 5

HTML, CSS, and JavaScript All in One: Covering HTML5, CSS3, and ES6, Sams Teach Yourself

4
Head First HTML and CSS: A Learner's Guide to Creating Standards-Based Web Pages

Rating is 4.7 out of 5

Head First HTML and CSS: A Learner's Guide to Creating Standards-Based Web Pages

5
HTML, CSS & JavaScript in easy steps

Rating is 4.6 out of 5

HTML, CSS & JavaScript in easy steps

6
HTML and CSS: Visual QuickStart Guide

Rating is 4.5 out of 5

HTML and CSS: Visual QuickStart Guide

7
HTML & CSS: The Complete Reference, Fifth Edition (Complete Reference Series)

Rating is 4.4 out of 5

HTML & CSS: The Complete Reference, Fifth Edition (Complete Reference Series)

8
Beginning HTML and CSS

Rating is 4.3 out of 5

Beginning HTML and CSS

9
HTML, XHTML and CSS For Dummies

Rating is 4.2 out of 5

HTML, XHTML and CSS For Dummies

10
HTML & CSS: The Good Parts: Better Ways to Build Websites That Work (Animal Guide)

Rating is 4.1 out of 5

HTML & CSS: The Good Parts: Better Ways to Build Websites That Work (Animal Guide)


What is the syntax for adding a border to an element in CSS?

The syntax for adding a border to an element in CSS is:

1
2
3
selector {
  border: border-width border-style border-color;
}


You can choose to specify one, two, or all three of these properties. Here's a breakdown of each property:

  • border-width: It determines the thickness of the border. You can specify it using a specific value (e.g., 1px, 2px) or using relative values like thin, medium, or thick.
  • border-style: It determines the style of the border. You can set it to solid, dotted, dashed, double, groove, ridge, inset, outset, or none.
  • border-color: It determines the color of the border. You can use a specific color name (e.g., red, blue) or specify the color using a hexadecimal code (#RRGGBB) or an RGB value (rgb(255, 0, 0)).


Here's an example of applying a border:

1
2
3
p {
  border: 1px solid black;
}


In this example, the border of all <p> elements will be 1 pixel thick, with a solid style, and colored black.


What is the CSS property for controlling the padding of an element?

The CSS property for controlling the padding of an element is the "padding" property.


How to add a glow effect around the border in CSS?

To add a glow effect around the border of an element in CSS, you can use the box-shadow property. Here's an example:

1
2
3
4
/* Add a glow effect around the border */
.element {
  box-shadow: 0 0 10px rgba(0, 0, 255, 0.5);
}


Here, box-shadow is set to 0 0 10px rgba(0, 0, 255, 0.5).

  • The 0 0 values specify the horizontal and vertical offsets of the shadow. In this example, both offsets are set to 0, which means the shadow will be centered around the element.
  • The 10px value specifies the blur radius of the shadow. Increase this value to make the glow effect larger.
  • The rgba(0, 0, 255, 0.5) value specifies the color and transparency of the shadow. In this example, it is set to a semi-transparent blue color. You can modify the RGB values to change the color, and the last value (0.5) to change transparency.


You can adjust these values to achieve the desired glow effect around the border of your element.


How to specify the border color in CSS?

To specify the border color in CSS, you can use the border-color property.


Here are the different ways to specify the border color:

  1. Specify a single color for all borders: border-color: #000000; /* specify hex color code */ border-color: rgb(0, 0, 0); /* specify RGB color */ border-color: black; /* specify color name */
  2. Specify different colors for each border (clockwise order: top, right, bottom, left): border-color: red blue green yellow;
  3. Specify different colors for each side individually: border-top-color: red; border-right-color: blue; border-bottom-color: green; border-left-color: yellow;


Remember, if you're using shorthand border properties like border or border-top, border-right, border-bottom, border-left, you can specify the border color along with other border properties in one line.

Facebook Twitter LinkedIn Whatsapp Pocket

Related Posts:

To make an element float in CSS, you can use the float property. The float property allows an element to be aligned along the left or right side of its container, allowing other elements to flow around it.To apply the float property to an element, you can use ...
To hide an element using CSS, you can use the display property. Here are a few ways to do it:display: none;: This property completely hides the element from the page layout. It will be as if the element doesn&#39;t exist. It also removes the space that the ele...
To make a &lt;div&gt; element clickable in HTML and CSS, you can use the following steps:Step 1: HTML Markup &lt;div id=&#34;clickable-div&#34;&gt;&lt;/div&gt; Step 2: CSS Styling You can provide a CSS selector to target the &lt;div&gt; element using its id or...