{"id":1320,"date":"2025-04-09T10:02:28","date_gmt":"2025-04-09T10:02:28","guid":{"rendered":"https:\/\/enblocks.com\/?post_type=docs&p=1320"},"modified":"2025-04-15T16:13:04","modified_gmt":"2025-04-15T16:13:04","slug":"border-box-shadow","status":"publish","type":"docs","link":"https:\/\/enblocks.com\/docs\/border-box-shadow\/","title":{"rendered":"Border & Box Shadow"},"content":{"rendered":"\n
\n
\n

1. Border<\/h2>\n\n\n\n

The border property lets you define the style, width, and color of an element’s border, with options to customize the border style (solid, dashed, dotted, etc.), set the border width and color, and apply a hover effect that changes the border color. Additionally, you can use responsive design techniques to adjust the border width for different screen sizes.<\/p>\n\n\n\n

\"Block<\/figure>\n\n\n\n
<\/div>\n\n\n\n
\n
\n

<\/strong><\/p>\n<\/div>\n\n\n\n

Preview of Border<\/em><\/p>\n<\/div>\n\n\n\n

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

2. Border Radius<\/h2>\n\n\n\n

Border radius allows you to create rounded corners for an element, enhancing its visual appeal. You can also apply responsive border radius to adjust the roundness based on screen size. Additionally use fluid border radius for a more flexible design that adapts smoothly to different screen dimensions.<\/p>\n\n\n\n

\"Block<\/figure>\n\n\n\n
<\/div>\n\n\n\n
\n
\n

<\/strong><\/p>\n<\/div>\n\n\n\n

Preview of Border Radius<\/em><\/p>\n<\/div>\n\n\n\n

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

3. Fancy Border Radius<\/h2>\n\n\n\n

Fancy border radius allows you to create unique, visually striking corner effects, such as elliptical or asymmetrical curves, adding a creative and dynamic touch to the design of elements.<\/p>\n\n\n\n

\"Block<\/figure>\n\n\n\n
<\/div>\n\n\n\n
\n
\n
\n

One <\/strong><\/p>\n<\/div>\n\n\n\n

\n

<\/strong>Two<\/p>\n<\/div>\n\n\n\n

\n

Three <\/strong><\/p>\n<\/div>\n\n\n\n

\n

Four <\/strong><\/p>\n<\/div>\n\n\n\n

\n

Five <\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n

Preview of Fancy Border Radius<\/em><\/p>\n<\/div>\n\n\n\n

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

4. Box Shadow<\/h2>\n\n\n\n

Box shadow allows you to add depth and dimension to elements by creating shadow effects. You can customize the shadow color on hover, as well as set a different box shadow color when the parent element is hovered, creating dynamic and interactive visual effects.<\/p>\n\n\n\n

\"Block<\/figure>\n\n\n\n
<\/div>\n\n\n\n
\n
\n
\n

<\/p>\n<\/div>\n\n\n\n

\n

<\/p>\n<\/div>\n\n\n\n

\n

<\/p>\n<\/div>\n<\/div>\n\n\n\n

Preview of Box Shadow<\/em><\/p>\n<\/div>\n\n\n\n

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

5. Outline<\/h2>\n\n\n\n

Outline allows you to define a border-like effect around an element, and you can customize the outline color on hover to create interactive and visually engaging transitions when the element is hovered over.<\/p>\n\n\n\n

\"Block<\/figure>\n\n\n\n
<\/div>\n\n\n\n
\n
\n

<\/strong><\/p>\n<\/div>\n\n\n\n

Preview of Outline<\/em><\/p>\n<\/div>\n\n\n\n

<\/div>\n<\/div>\n<\/div>\n","protected":false},"template":"","categories":[15],"class_list":["post-1320","docs","type-docs","status-publish","hentry","category-components"],"acf":[],"_links":{"self":[{"href":"https:\/\/enblocks.com\/wp-json\/wp\/v2\/docs\/1320","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/enblocks.com\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/enblocks.com\/wp-json\/wp\/v2\/types\/docs"}],"wp:attachment":[{"href":"https:\/\/enblocks.com\/wp-json\/wp\/v2\/media?parent=1320"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/enblocks.com\/wp-json\/wp\/v2\/categories?post=1320"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}