Type to generate custom UI components with AI

Type to generate UI components from text

OR

Browse thousands of MUI, Tailwind, React components that are fully customizable and responsive.

Explore Components

How to Create and Style Beautiful Borders in CSS

In the dynamic realm of web design, borders stand out as a crucial element that goes beyond mere visual embellishment. These versatile design elements can do more than just frame content; they are pivotal in guiding user attention, separating sections, and enhancing overall visual hierarchy.

To empower you with the skills to wield this fundamental aspect of design effectively, this article is dedicated to unravelling the intricacies of CSS border properties. We’ll delve into not only the technical aspects but also share best practices that will elevate your web design prowess, ensuring that every border you create serves a purpose and enhances the user experience. Let’s embark on a journey to master the art of crafting and styling borders in CSS.

PS: Engineers waste time building and styling components when working on a project, writing repetitive markup adds time to the project and is a mundane, boring task for engineers. PureCode.ai uses AI to generate a large selection of custom, styled UI components for different projects and component types.

CSS Border Style

In the realm of CSS, the border-style property emerges as a versatile tool that allows you to define the appearance of borders around elements. With ten distinct values at your disposal, let’s delve into the array of options and their corresponding visual effects.

None

Specifies no border

.none {
  border-style: none;
}

Here’s what the output will look like:

No border

Solid

Specifies a solid border

.solid {
  border-style: solid;
}

Here’s what the output will look like:

Solid border

Dashed

Specifies a dashed border

.dashed {
  border-style: dashed;
}

Here’s what the output will look like:

Dashed border

Dotted

Specifies a dotted border

.dotted {
  border-style: dotted;
}

Here’s what the output will look like:

Dotted border

Double

Specifies a double border

.double {
  border-style: double;
}

Here’s what the output will look like:

Double border

Groove

Specifies a 3D grooved border

.groove {
  border-style: groove;
}

Here’s what the output will look like:

Groove border

Ridge

Specifies a 3D ridged border

.ridge {
  border-style: ridge;
}

Here’s what the output will look like:

Ridge border

Inset

Specifies a 3D inset border, which makes the element appear embedded

.inset {
  border-style: inset;
}

Here’s what the output will look like:

Inset border

Outset

Specifies a 3D outset border, which makes the element appear embossed

.outset {
  border-style: outset;
}

Here’s what the output will look like:

Outset border

Hidden

Specifies a hidden border

.hidden {
  border-style: hidden;
}

Here’s what the output will look like:

Hidden border

The specified border-color property determines how the visual effect of groove, ridge, inset, and outset values would be applied. It uses black as the default color when no border-color value is specified.

Additionally, the border-style property can be applied with one to four values, offering subtle control over specific sides of an element:

  • If only one value is defined, it applies to all sides.

  • If two values are defined, the first applies to the top and bottom, and the second to the right and left.

    .twovalues {
      border-style: dotted solid;
    }
  • If three values are defined, they correspond to the top, right/left, and bottom.

    .threevalues {
      border-style:  groove hidden ridge;
    }
  • If four values are defined, they represent top, right, bottom, and left, respectively.

    .fourvalues {
      border-style: double dashed dotted solid;
    }

By understanding and harnessing the diverse possibilities of the border-style property, you gain the ability to craft borders that enhance the aesthetics and structure of your web elements.

CSS Border Width

The CSS border-width property is a fundamental tool that allows you to control the width of borders surrounding elements. This property accepts both keyword values and length values, offering flexibility in defining border widths.

Keyword Values:

  • thin

  • medium

  • thick

Length Values:

  • px (pixels)

  • pt (points)

  • em

  • rem

  • vh (viewport height)

  • and more

Similar to the border-style property, the border-width property can be specified with one to four values, each influencing a specific side of the element:

  • If one value is defined, it applies universally to all sides.

  • If two values are defined, the first represents top and bottom border widths, and the second represents right and left border widths.

  • With three values, the sequence corresponds to top, left/right, and bottom border widths.

  • Four values represent the top, right, bottom, and left border widths, respectively.

Consider the examples below to grasp the versatility of border-width values:

<html>
<head>
  <style>
    .thin {
      border: thin solid;
    }
    .medium {
      border: medium solid;
    }
    .thick {
      border: thick solid;
    }
    .length {
      border: 2px solid;
    }
    .mix {
      border-style: solid;
      border-width: 2px 8px 4px;
    }

    /* Other styling */
    p {
      font-family: Arial;
    }
  </style>
</head>

<body>
  <p class="thin">Thin border</p>
  <p class="medium">Medium border</p>
  <p class="thick">Thick border</p>
  <p class="length">Border defined by length value</p>
  <p class="mix">Mixed border</p>
</body
</html>

Here’s what the output of the code example above will look like:

CSS border width

Whether you opt for keyword values like thin, medium, and thick, or precise length values, understanding the nuances of CSS `border-width` empowers you to shape the visual impact of your web elements with precision.

CSS Border Color

The CSS `border-color` property serves as a palette for defining the color of borders, offering a spectrum of choices that enhance the visual appeal of your web elements. This property accommodates color definitions through various methods, including color names, hex codes, RGB or RGBA values, and HSL or HSLA values.

Color Definition Options:

  • Color names: Colors can be specified using predefined names, such as “red”, “blue”, or “green”.

    .colorname {
      border: 2px groove blue;
    }
  • Hexadecimal color codes: Hex codes represent colors using a six-digit combination of numbers and letters (0-9, A-F).

    .hex {
      border: 2px ridge #00A4BD;
    }
  • RGB or RGBA values: RGB (Red, Green, Blue) values define a color based on its intensity in each of these color channels. RGBA includes an additional alpha channel for transparency.

    .rgb {
      border: 2px inset rgb(150,100,255);
    }
    .rgba {
      border: 2px inset rgb(150,100,255, 0.5); /* with transparency */
    }
  • HSL or HSLA values: HSL (Hue, Saturation, Lightness) values define colors based on their position in the color wheel. HSLA includes an alpha channel for transparency.

    .hsla {
      border: 2px outset hsla(0,60%,70%, 0.5);
    }

Each of these color definition options has its own advantages and use cases. Color names are easy to remember and use, while hexadecimal codes provide precise control over color values. RGB and HSL values offer a more intuitive way to describe colors, especially when considering variations in saturation and lightness. RGBA and HSLA values add transparency to colors, allowing for layered and visually dynamic designs. The choice of color definition method depends on the specific requirements and preferences of the designer.

Border Color Shorthand

Much like the border-style and border-width properties, the `border-color` property can be specified with one to four values, providing meticulous control over individual sides of an element:

  • A single value universally applies to all sides.

  • With two values, the first represents top and bottom border colors, and the second represents right and left border colors.

    .twovalues {
      border-width: 2px;
      border-style: solid;
      border-color: #00A4BD #FF7A59;
    }
  • Three values correspond to the top, left/right, and bottom border colors.

    .threevalues {
      border-width: 2px;
      border-style: solid;
      border-color: #00A4BD #33475B #FF7A59;
    }
  • Four values represent the top, right, bottom, and left border colors, respectively.

    .fourvalues {
      border-width: 2px;
      border-style: solid;
      border-color: #00A4BD #33475B #FF7A59 #30A4BD;
    }

CSS Border Shorthand

CSS shorthand provides a concise and efficient way to set values for multiple properties simultaneously by grouping them together with spaces.

For instance, the `border` property serves as shorthand for its individual counterparts—`border-width`, `border-style`, and `border-color`. Instead of composing lengthy declarations in longhand:

border-width: 5px;
border-style: solid;
border-color: #00A4BD;

You can achieve the same result more succinctly using the shorthand `border` property:

border: 5px solid #00A4BD;

By leveraging shorthand notation, you enhance code readability and streamline your style declarations without sacrificing precision.

Adding CSS Border to a Single Side

To add a CSS border to a single side of an element, you can use the individual properties for that side: `border-top`, `border-right`, `border-bottom`, or `border-left`. Here’s an example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    /* Apply a border to the top side */
    .top-border {
      border-top: 2px solid #00A4BD;
    }

    /* Apply a border to the right side */
    .right-border {
      border-right: 2px solid #FF7A59;
    }

    /* Apply a border to the bottom side */
    .bottom-border {
      border-bottom: 2px solid #33475B;
    }

    /* Apply a border to the left side */
    .left-border {
      border-left: 2px solid #6A0572;
    }

    /* Other styling */
    p {
      font-family: Arial, sans-serif;
      padding: 20px;
      margin: 0;
    }
  </style>
  <title>CSS Border on a Single Side</title>
</head>

<body>
  <p class="top-border">This paragraph has a border on the top side.</p>
  <p class="right-border">This paragraph has a border on the right side.</p>
  <p class="bottom-border">This paragraph has a border on the bottom side.</p>
  <p class="left-border">This paragraph has a border on the left side.</p>
</body>
</html>

In this example:

  • The class `top-border` adds a border to the top side.

  • The class `right-border` adds a border to the right side.

  • The class `bottom-border` adds a border to the bottom side.

  • The class `left-border` adds a border to the left side.

CSS Border Padding

The CSS padding property serves as a pivotal tool in creating space between an element’s content and its border. When the padding property is not explicitly defined, no space exists between the content and the border.

To introduce space, utilize the padding property with length or percentage values, ensuring they are positive to render appropriately. Negative values will not have any effect.

As with the properties discussed above, the padding property can accept one to four values, tailoring the space allocation for specific sides of the element:

  • When one value is defined, it applies universally to all sides.

  • With two values, the first represents top and bottom padding, and the second represents right and left padding.

  • Three values correspond to the top, left/right, and bottom padding.

  • Four values represent the top, right, bottom, and left padding, respectively.

Let’s take a look at examples defined by different padding values below.

<html>
<head>
  <style>
    .length {
      border: 2px solid #00A4BD;
      padding: 10px;
    }
    .percent {
      border: 2px solid #00A4BD;
      padding: 5%;
    }
    .twovalues {
      border: 2px solid #00A4BD;
      padding: 25px 2px;
    }

    /* Other styling */
    p {
      font-family: Arial;
    }
  </style>
</head>

<body>
  <p class="length">This paragraph has a defined border and a padding of 10px.</p>
  <p class="percent">This paragraph has a defined border and padding of 5% the width of the parent element.</p>
  <p class="twovalues">This paragraph has a defined border and top and bottom padding of 25px and right and left padding of 2px.</p>
</body>
</html>

By harnessing the padding property, you seamlessly control the space around your elements, enhancing the visual harmony and readability of your web content.

How to add Shadows to Borders in CSS

The CSS box-shadow property, when paired with the border property, unveils a powerful mechanism for creating captivating shadow effects. Understanding the key components of the box-shadow property allows you to wield this feature effectively. Here’s a breakdown of its essential values:

Required Values:

  1. h-offset: Sets the horizontal offset of the shadow. Positive values cast the shadow on the right, while negative values place it on the left.

  2. v-offset: Establishes the vertical offset of the shadow. Positive values position the shadow below, and negative values position it above.

    .shadow {
      border: 2px solid;
      padding: 10px;
      box-shadow: 6px 4px; /* 6px is set as h-offset, and 4px as v-offset */
    }

    Here’s what the output will look like:

    CSS border shadow

Optional Values:

  1. Blur: Add a third value to introduce a blurred effect. Higher values increase the blurriness of the shadow.

    .blur {
      border: 2px solid;
      padding: 10px;
      box-shadow: 6px 4px 8px; /* 8px is set as blur */
    }

    Here’s what the output will look like:

    CSS shadow blur
  2. Spread: Incorporate a fourth value to define the spread of the shadow. A positive value enlarges the shadow, while a negative value shrinks it.

    .spread1 {
      border: 2px solid;
      padding: 10px;
      box-shadow: 6px 4px 8px 3px; /* 3px is set as spread to enlarge shadow  */
    }
    .spread2 {
      border: 2px solid;
      padding: 10px;
      box-shadow: 6px 4px 8px -2px; /* -2px is set as spread to shrink shadow */
    }

    Here’s what the output will look like:

    CSS shadow spread
  3. Color: Include a color name, hex code, or other color value as seen in the CSS border color section above. This can be used to determine the shadow’s color. Omitting this value results in the shadow inheriting the text color.

    .colorshadow {
      border: 2px solid #00A4BD;
      padding: 10px;
      box-shadow: 6px 4px #00A4BD;
    }

    Here’s what the output will look like:

    CSS shadow color
  4. Inset: Add the inset keyword to position the shadow inside the box.

    .inset {
      border: 2px solid;
      padding: 10px;
      box-shadow: 6px 4px inset;
    }

    Here’s what the output will look like:

    CSS shadow inset

Multiple Shadows:

To define or add multiple shadows to an element, you can have multiple sets of values separated with commas. Ensure increasing `h-offset` and `v-offset` values for cascading shadows. Let’s take a look at an example:

.multiple {
  border: 1px solid;
  padding: 10px;
  box-shadow: 4px 4px #00A4BD, 8px 8px #FF7A59, 12px 12px #334758;
}

This property creates multiple box shadows for the element. Each shadow is defined as a set of values separated by commas. For each set:

  • The first value `4px` is the horizontal offset, determining how far to the right or left the shadow is cast.

  • The second value `4px` is the vertical offset, determining how far up or down the shadow is cast.

  • The third value `#00A4BD` is the color of the shadow.

In this specific example, there are three box shadows:

  1. A shadow with a horizontal and vertical offset of 4 pixels each, and a color of `#00A4BD`.

  2. A shadow with a horizontal and vertical offset of 8 pixels each, and a color of `#FF7A59`.

  3. A shadow with a horizontal and vertical offset of 12 pixels each, and a color of `#334758`.

These shadows create a layered effect, with each subsequent shadow being larger and potentially a different color than the previous one. The result is a visually appealing shadow effect for the element with the “multiple” class.

Multiple shadows in CSS

How to Use Images as Borders in CSS

The CSS border-image property offers a sophisticated way to beautify your elements by using images as borders rather than conventional border lines. This versatile property serves as shorthand for several individual properties, including `border-image-source`, `border-image-slice`, `border-image-width`, `border-image-outset`, and `border-image-repeat`. When employing the shorthand property, only three of these need to be defined:

  1. border-image-source: Specifies the image URL or file path.

  2. border-image-slice: Determines how the image should be sliced.

  3. border-image-repeat: Specifies whether the border image should be stretched, repeated, or rounded.

For the image border to render, the border property must also be defined. Explore the following examples showcasing different border-image values:

<html>
<head>
  <style>
    .stretch { 
      border: 8px solid transparent;
      padding: 10px;
      border-image: url(https://c.pxhere.com/images/c4/56/a9d6dfc04d5ad4b03669dcc2523c-1617980.jpg!d) 50;
    }
    .repeat { 
      border: 8px solid transparent;
      padding: 10px;
      border-image: url(https://c.pxhere.com/images/c4/56/a9d6dfc04d5ad4b03669dcc2523c-1617980.jpg!d) 50 repeat;
    }
    .round { 
      border: 8px solid transparent;
      padding: 10px;
      border-image: url(https://c.pxhere.com/images/c4/56/a9d6dfc04d5ad4b03669dcc2523c-1617980.jpg!d) 50 round;
    }
    .percent { 
      border: 8px solid transparent;
      padding: 10px;
      border-image: url(https://c.pxhere.com/images/c4/56/a9d6dfc04d5ad4b03669dcc2523c-1617980.jpg!d) 20% round;
    }

    /* Other styling */
    p {
      font-family: Arial;
    }
  </style>
</head>

<body>
  <p class="stretch">This is a stretched image border. Since stretch is the default value, you can leave it out of the CSS. </p>
  <p class="repeat">This is a repeating image border.</p>
  <p class="round">This is a rounded image border. That means the image is tiled or repeated, but if it does not fill the area with a whole number of tiles, the image is rescaled so it fits.</p>
  <p class="percent">This is a rounded image border with its border-slice-property defined by a percentage.</p>
</body>
</html>

Here’s what the border images will look like when rendered on the browser:

CSS border image

These examples demonstrate the creative possibilities of border-image, allowing you to enhance your design aesthetics by seamlessly incorporating images as captivating borders.

How to Use Gradients as Borders in CSS

The CSS `border-image` property also extends its versatility to allow the incorporation of CSS gradients as borders. To craft a gradient border, set the border-image property to either “linear-gradient” or “repeating-linear-gradient”. Within the parentheses, define the gradient using color stops, allowing you to use a mix of HTML color names, hex color codes, RGB color codes, and HSL color values. Additionally, include a value to specify the border-image-slice property.

To get the gradient border to work, it is essential to define the border property. Let’s take a look at some examples:

<html>
<head>
  <style>
    .gradient1 { 
      border: 8px solid;
      padding: 10px;
      border-image: linear-gradient(45deg, #FFFFFF, rgb(255, 122, 89)) 10;
    }
    .gradient2 { 
      border: 8px solid;
      padding: 10px;
      border-image: repeating-linear-gradient(to bottom right, #33475b, #0033CC, #FF77CC, rgb(255, 122, 89)) 20;
    }
  </style>
</head>

<body>
  <p class="gradient1">This is a gradient border. </p>
  <p class="gradient2">This is a repeating gradient border. </p>
</body>
</html>

Here’s what the border gradients will look like when rendered on the browser:

CSS border gradient

Creating Rounded Borders in CSS

The CSS `border-radius` property provides a seamless way to introduce rounded edges to borders, enhancing the visual appeal of your elements. This property accepts length values, where the magnitude determines the degree of rounding—larger values result in rounder edges.

Similar to other border-related properties such as `border-style`, `border-width`, `border-color`, and `padding`, `border-radius` can be customized with between one and four values. The configuration is as follows:

  • If one value is defined, it applies universally to all sides of the element.

  • With two values, the first represents the top and bottom border edges, and the second represents the right and left border edges.

  • Three values correspond to the top, left/right, and bottom border edges.

  • Four values represent the top, right, bottom, and left border edges, respectively.

Let’s take a look at examples defined by different border-radius values below.

<html>
<head>
  <style>
    .default {
      border: 2px solid #00A4BD;
      padding: 10px;
    }
    .rounded {
      border: 2px solid #00A4BD;
      padding: 10px;
      border-radius: 2px;
    }
    .rounder {
      border: 2px solid #00A4BD;
      padding: 10px;
      border-radius: 12px;
    }
    .multiple {
      border: 2px solid #00A4BD;
      padding: 10px;
      border-radius: 2px 10px;
    }
    .hidden {
      background-color: #00A4BD;
      border: 2px solid #00A4BD;
      padding: 10px;
      border-radius: 1rem;  
    }

    /* Other styling */
    p {
      font-family: Arial;
    }
  </style>
</head>

<body>
  <p class="default">Border without rounded edges</p>
  <p class="rounded">Border with rounded edges</p>
  <p class="rounder">Border with rounder edges</p>
  <p class="multiple">Border with different rounded edges</p>
  <p class="hidden"> Border with rounded edges around color element</p>
</body>
</html>

CSS Border Collapse

When crafting HTML tables with defined borders for the table, rows, and cells, you have the option to either keep the borders distinct or merge them using the CSS `border-collapse` property.

In the image below, the default `border-collapse` property is set to “separate”. You can omit this property in your CSS, as “separate” is the default value.

HTML table - Hubspot

However, suppose you prefer to collapse the borders, providing a more seamless and compact appearance. In that case, you can set the `border-collapse` property to “collapse”, as demonstrated in the code example below.

<html>
<head>
  <style>
    table, tr, td {
      border: 1px solid black;
      padding: 5px;
      border-collapse: collapse;
    }

    /* Other styling */
    table {
      font-family: Arial;
    }
  </style>
</head>

<body>
  <table>
    <tr>
      <th>Name</th>
      <th>Job Title</th>
      <th>Email address</th>
    </tr>
    <tr>
      <td>Anna Fitzgerald</td>
      <td>Staff Writer</td>
      <td>example@company.com</td>
    </tr>
    <tr>
      <td>John Smith</td>
      <td>Marketing Manager</td>
      <td>example2@company.com</td>
    </tr>
    <tr>
      <td>Zendaya Grace</td>
      <td>CEO</td>
      <td>example2@company.com</td>
    </tr>
  </table>
</body>
</html>

By adjusting the border-collapse property, you have the flexibility to refine the visual presentation of your HTML tables according to your design preferences.

CSS border collapse

Best Practices When Working with Borders in CSS

Now, that we have the different ways to use and customize borders in CSS, let’s discuss some best practices we need to take note of when using CSS borders.

When working with borders in CSS, adhering to best practices ensures a clean and consistent design. Here are some best practices to consider:

  1. Consistent Styling: Maintain a consistent border style, width, and color across your website to create a cohesive look and feel.

  2. Use Shorthand Properties: Utilize shorthand properties like borders to set multiple border properties in a single declaration. This improves code readability and reduces redundancy.

  3. Responsive Design: Consider responsiveness by using relative units like percentages or ems for border widths. This ensures that borders scale appropriately on different screen sizes.

  4. Separate Concerns: Keep styling concerns separate. Use separate CSS classes for layout and border styling to enhance code modularity and maintainability.

  5. Avoid Overly Complex Borders: Keep borders simple and avoid overly complex designs that may distract or clutter the interface. A clean and straightforward border contributes to a better user experience.

Best Practices Pt. II

  1. Optimize Performance: Minimize the use of heavy border effects, especially on large-scale projects, to optimize performance. Excessive use of intricate borders may impact page loading times.

  2. Consider Browser Compatibility: Be mindful of browser compatibility when using advanced border features or properties. Test your website on different browsers to ensure a consistent appearance.

  3. Semantic Use of Borders: Use borders to convey meaning. For instance, consider using borders to highlight interactive elements like buttons or to separate different sections of content.

  4. Experiment with Shadows: Combine borders with box shadows for depth and emphasis. Experiment with subtle shadow effects to create a layered and visually appealing design.

  5. Accessibility: Ensure that your design is accessible. Choose colors with sufficient contrast for text and borders, making it easier for users with visual impairments to navigate your site.

By following these best practices, you can create well-designed, responsive, and performant web interfaces with effective use of borders in CSS.

With PureCode.ai you can get customized, and ready-to-use components which will allow you to prioritize more important and thought-intensive tasks to speed up the development of your user interface. PureCode.ai can cater to your code development process, saving you valuable time and effort when working on a project.

Final Thoughts on CSS Border

In conclusion, mastering the art of creating and styling borders in CSS is a fundamental skill for web designers and developers alike. Borders not only provide structure and separation within a webpage but also play a crucial role in guiding user attention and enhancing the overall visual hierarchy. Throughout this article, we have explored the intricacies of CSS border properties, delving into styles, widths, colors, and even advanced techniques like shadow integration, image borders, and gradients.

By adhering to best practices, such as maintaining consistency, embracing responsiveness, and considering both aesthetics and accessibility, you can elevate your web design prowess. Whether it’s crafting simple and clean borders or experimenting with more intricate designs, the versatility of CSS borders allows for endless possibilities in creating visually appealing and user-friendly interfaces.

As you continue to refine your skills and explore the nuances of CSS, remember that borders are not merely decorative elements but powerful tools that contribute to a seamless and engaging user experience. With these insights and practices at your disposal, you are well-equipped to wield borders effectively, adding both structure and style to your web designs. So, go ahead, experiment, and let your creativity flourish in the realm of CSS borders.

Further Readings

If you enjoyed reading this piece, consider reading other articles from our blogs and also, my recommendations:

For your reference, you can also check out the below YouTube video to learn more about CSS borders.

Shadrach Abba

Shadrach Abba