---
title: "Border and outline properties"
date: "2017-11-11T13:00:13+00:00"
summary: "Learn how to enhance your website's design with Site Studio's border and outline properties. Discover step-by-step instructions for adding stylish borders and outlines to your elements, improving visual appeal and user experience."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/border-and-outline-properties"
id: "ecebf936-38ce-441d-9fe8-dd6c8562cee6"
---

Table of contents will be added

Border and outline properties allow you to add and style the orders of an element.

Adding border and outline properties to a style
-----------------------------------------------

To add Border and outline properties to a style:

1.  Navigate to the Style builder. This is available when you edit [Base styles](/drupal-starter-kits/add-ons/site-studio/creating-base-styles "Creating base styles") or [Custom styles](/drupal-starter-kits/add-ons/site-studio/creating-custom-styles "Creating custom styles"). For more, see [Using the style builder](/drupal-starter-kits/add-ons/site-studio/using-style-builder "Using the style builder")
2.  Within the Style editor area, click on the **Properties** button
3.  Then select Border and outline > **(Select a Border and outline sub-group)** in the menu.

The Border and outline properties include the following groups of fields:

Border width
------------

*   **Equal width -** Set all borders to the same width in pixels
*   **Top -** Set the top border in pixels
*   **Bottom -** Set the bottom border in pixels
*   **Left -** Set the left border in pixels
*   **Right -** Set the right border in pixels.

For details of each property, see [Border width properties.](/drupal-starter-kits/add-ons/site-studio/border-width-properties "Border width properties")

Border radius
-------------

*   **Equal radius -** Set the radius of all corners
*   **Top left -** Set the top left radius
*   **Top right -** Set the top right radius
*   **Bottom left -** Set the bottom left radius
*   **Bottom right -** Set the bottom right radius.

For details of each property, see [Border radius properties.](/drupal-starter-kits/add-ons/site-studio/border-radius-properties "Border radius properties")

Border style
------------

*   **Equal style -** Set the style of all borders
*   **Top -** Set the top border style
*   **Bottom -** Set the bottom border style
*   **Left -** Set the left border style
*   **Right -** Set the right border style.

For details of each property, see [Border style properties.](/drupal-starter-kits/add-ons/site-studio/border-style-properties "Border style properties")

Border color
------------

*   **Equal color -** Set the color of all borders
*   **Top -** Set the top border color
*   **Bottom -** Set the bottom border color
*   **Left -** Set the left border color
*   **Right -** Set the right border color.

For details of each property, see [Border color properties.](/drupal-starter-kits/add-ons/site-studio/border-color-properties "Border color properties")

Outline width, style and color
------------------------------

An outline is a line that is drawn around elements, outside the borders. Outlines are applied to all sides. You can set the following properties:

*   **Width -** Sets the width of the outline
*   **Offset -** Sets how far outside the element the outline is drawn
*   **Color -** Sets the color of the outline
*   **Style -** Sets the style of the outline.

For details of each property, see [Outline properties.](/drupal-starter-kits/add-ons/site-studio/outline-properties "Outline properties")