{"id":5830,"date":"2024-04-14T12:26:28","date_gmt":"2024-04-14T04:26:28","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=5830"},"modified":"2024-04-14T12:26:28","modified_gmt":"2024-04-14T04:26:28","slug":"enhanced-borders-on-the-web","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/enhanced-borders-on-the-web\/","title":{"rendered":"Enhanced borders on the web"},"content":{"rendered":"\n
\n

Outlines determine the perimeter of an element and establish borders on one or more sides of the element’s boundary. You have the ability to specify the border and perimeter of any chosen element in the Style section.<\/p>\n

In this teaching:<\/strong><\/p>\n

    \n
  1. Perimeter<\/li>\n
  2. Design<\/li>\n
  3. Thickness<\/li>\n
  4. Shade<\/li>\n
  5. Forms<\/li>\n
  6. Edges & corners<\/li>\n
  7. Facets<\/li>\n
  8. Transition animations<\/li>\n<\/ol>\n

    Borders enable you to produce outlines on one or more sides of an element’s boundary. Borders occupy space, extending the size of an element. In instances of elements with a defined size, borders will exert pressure on the content within.<\/p>\n

    To incorporate a border effect without enlarging an element’s size, introduce an internal or external box shadow with a blur value of 0.<\/p>\n

    Perimeter<\/h2>\n
    \n
    <\/div>\n<\/figure>\n

    Determine the perimeter of all corners or individual corners of an element to create rounded corners.<\/p>\n

    By default, the perimeter is specified in pixels (px). To utilize percentages, input the percentage value and symbol (%) into any border input field. You can also utilize any CSS unit from the unit dropdown.<\/p>\n

    Find out more about<\/strong>input values and units<\/strong>.<\/strong><\/p>\n

    Design<\/h2>\n

    The design attribute establishes the type of border that will encircle an element. A border can be solid, dashed, or dotted. You can also conceal your border settings by setting the design to none.<\/p>\n

    Certain pre-existing elements come with default borders, like form input fields and block quotes. You can eliminate default borders by setting the border design to none.<\/p>\n

    Thickness<\/h2>\n

    The thickness dictates the width of a border. This value can utilize any CSS unit from the options available in the unit dropdown.<\/p>\n

    Learn more about<\/strong>input values and units<\/strong>.<\/strong><\/p>\n

    Shade<\/h2>\n

    In the Style section<\/strong> > Color<\/strong>, you can specify the color and transparency for any element’s border in border settings. Adjusting the color of a border side results in a bevel or picture frame effect.<\/p>\n

    Forms<\/h2>\n

    By default, setting a radius for an element will apply the value to all corners. You can set a value by sliding the slider or entering a value in the input field.<\/p>\n

    Employ pixel values for rounded corners and percentages for elliptical corners with the same proportion.<\/p>\n

    Capsule forms<\/h3>\n

    To create capsule shapes, establish your radius to a pixel value larger than half the element’s shortest dimension. A higher value like 500 generally works if you wish to avoid complex calculations.<\/p>\n

    Ellipses<\/h3>\n

    For ellipses, set the radius to 50%. Percentages are based on the width and height of an element<\/p>\n

    Note: Ellipses may seem inconsistent when you have elements with differing dimensions.<\/p><\/blockquote>\n

    Circles<\/h3>\n

    To form circles, set the radius to 50% and ensure the element’s width and height are identical.<\/p>\n

    Distinct shapes<\/h3>\n

    You can establish varying values on each corner to produce unique shapes.<\/p>\n

    Rectangle to circle<\/h3>\n

    To convert a rectangular image into a circular one without distortion, you can utilize the radius and object fit to position the image inside a Div block \u2014 here’s how:<\/p>\n

      \n
    1. Drag a Div block<\/strong> onto the canvas<\/li>\n
    2. Insert the image inside the Div block<\/strong><\/li>\n
    3. Choose the Div block<\/strong>\u00a0<\/li>\n
    4. Access the Style section<\/strong> > Selector<\/strong> and form a Class<\/strong> (e.g., Image holder thing)\u00a0<\/li>\n
    5. Establish an equivalent height<\/strong> and width<\/strong> (e.g., 400px)<\/li>\n
    6. Set the radius<\/strong> to 50% (to achieve circularity since the width and height are equal)<\/li>\n
    7. Set overflow<\/strong> to hidden (to mask any section of the image outside the circle)<\/li>\n
    8. Select the image on the canvas<\/li>\n
    9. Set the image’s width<\/strong> and height<\/strong> to 100%<\/li>\n
    10. Set fit<\/strong> to cover (to cover the space within the circular div block)<\/li>\n
    11. Access the ellipses beside fit<\/strong> to situate the circular cover (to anchor it to a corner or the center)<\/li>\n<\/ol>\n

      Edges & corners<\/h2>\n

      In the Style section<\/strong> > Borders<\/strong>, you can design all sides simultaneously (by clicking in the center) or each side individually.\u00a0<\/p>\n

      If you establish and style a border at the top, it only affects the top side. If you establish and style a border on the left, only the left side is affected.<\/p>\n

      Facets<\/h2>\n

      Facets introduce depth to an image.\u00a0<\/p>\n

      \n
      <\/div>\n<\/figure>\n

      \u200d
      To append a bevel effect to a button, open the Style section<\/strong> > Borders<\/strong>:<\/p>\n

        \n
      1. Add a border to all sides of the button (e.g., allocate all sides a width of 10px)<\/li>\n
      2. Assign a border color (different from the button color) to all sides\u00a0<\/li>\n
      3. Click one side of the border in the Style section<\/li>\n
      4. Choose a color and input a color (different from the original border color)<\/li>\n
      5. Adjust the width of one side<\/li>\n<\/ol>\n

        Transition animations<\/h2>\n

        You have the capability to design anything in the Style section \u2014 let’s style a button to animate upon hover.<\/p>\n

        \u200d
        To grant your button rounded corners upon hover:<\/p>\n

          \n
        1. Select the button on the canvas<\/li>\n
        2. Access the Style section<\/strong> > Selector<\/strong> and opt for Hover<\/strong> from the dropdown<\/li>\n
        3. Scroll down to Borders<\/strong> and insert a radius<\/strong> (e.g., 10px)\u00a0<\/li>\n<\/ol>\n
          \n
          <\/div>
          Change selector to hover<\/figcaption><\/figure>\n

          To revert the button to its original state off hover and generate a seamless transition:<\/p>\n

            \n
          1. Select the button on the canvas<\/li>\n
          2. Access the Style section<\/strong> > Selector<\/strong> and opt for None<\/strong> from the dropdown<\/li>\n
          3. Scroll down to Effects <\/strong>> Transitions<\/strong> > Type<\/strong> > Property<\/strong> > Border radius<\/strong><\/li>\n<\/ol>\n
            \n
            <\/div>
            Change Selector to none<\/figcaption><\/figure>\n
            \n
            <\/div>
            Add a transition on the Border-Radius<\/figcaption><\/figure>\n

            To eliminate this animation:<\/p>\n

              \n
            1. Select the button on the canvas<\/li>\n
            2. Access the Style section<\/strong> > Selector<\/strong> and choose Hover<\/strong> from the dropdown<\/li>\n
            3. Scroll down to Borders <\/strong>> Radius <\/strong>> Reset<\/strong><\/li>\n<\/ol>\n
              \n
              <\/div>\n<\/figure>\n

              To give your button rounded corners on click:<\/p>\n

                \n
              1. Select the button on the canvas<\/li>\n
              2. Access the Style section<\/strong> > Selector<\/strong> and choose Pressed<\/strong> from the dropdown<\/li>\n
              3. Scroll down to Borders<\/strong> and insert a radius<\/strong> (e.g., 10px)\u00a0\n<\/li>\n<\/ol>\n
                \n
                <\/div>\n<\/figure>\n

                You can execute the same steps outlined above to introduce a transition and animate elements like the border color or border thickness on hover or click. Enjoy the process!\u00a0<\/p>\n

                And make sure to explore our complete course on animations with After Effects and Lottie.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Use borders to define the radius of an element and create outlines on one or more sides of an element’s boundary.","protected":false},"author":2,"featured_media":5831,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[284],"tags":[],"class_list":{"0":"post-5830","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-layout-design","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5830","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=5830"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5830\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5831"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=5830"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=5830"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=5830"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}