{"id":2367,"date":"2023-09-16T10:16:41","date_gmt":"2023-09-16T03:16:41","guid":{"rendered":"https:\/\/dev.artru.io.vn\/?p=2367"},"modified":"2023-11-12T12:35:17","modified_gmt":"2023-11-12T05:35:17","slug":"tao-round-out-borders","status":"publish","type":"post","link":"https:\/\/artru.net\/en\/tao-round-out-borders\/","title":{"rendered":"Create Round Out Borders"},"content":{"rendered":"

Rounded corners can now be easily implemented via properties border-radius<\/code>. On the contrary, if you want to round the "outer" corners, you need to customize a few more steps to get the desired result.<\/p>\n\n\n\n

You can search for the keyword "Round Out Borders" to learn more methods.<\/p>\n\n\n\n

For example: the natural state when the corners are not rounded.<\/h2>\n\n\n
\n
\"No
No corners yet<\/figcaption><\/figure>\n<\/div>\n\n\n
<div class=\"div-outer\">\n  <div class=\"div-inner\">\n    <div class=\"div-inner-2\">\n      <!-- Contents -->\n    <\/div>\n  <\/div>\n<\/div>\n<style>\n  .div-outer{\n    width: 300px;\n    height: 300px;\n    background-color: #c3c3c3;\n  }\n  .div-inner{\n    width: 50%;\n    height: 50px;\n    background-color: gray;\n  }\n<\/style><\/code><\/pre>\n\n\n\n
In this case I usually use pseudo elements ::before, ::after<\/code> to create "outer" corner fillets. But you need 4 pseudo elements to do this. Since pseudo-elements in CSS cannot be created multiple times, I was forced to create 1 more div-inner-2<\/code>.<\/p>\n\n\n\n
According to the problem, we need to create "outer" corner fillets in 2 locations Top-Right<\/code> and Bottom-Left<\/code><\/p>\n\n\n\n
Draw a circle at the corner to be covered with the ::before pseudo element<\/h2>\n\n\n
\n
\"Draw
Draw a circle at the outer corner<\/figcaption><\/figure>\n<\/div>\n\n\n
<div class=\"div-outer\">\n  <div class=\"div-inner\">\n    <div class=\"div-inner-2\">\n      <!-- Contents -->\n    <\/div>\n  <\/div>\n<\/div>\n<style>\n  .div-outer{\n    width: 300px;\n    height: 300px;\n    background-color: #c3c3c3;\n  }\n  .div-inner{\n    width: 50%;\n    height: 50px;\n    background-color: gray;\n    position: relative;\n  }\n  .div-inner::before{\n    content: \"\";\n    width: 50px;\n    height: 50px;\n    position: absolute;\n    background-color: red;\n    right: -50px;\n    top: 0;\n    border-radius: 50%;\n  }\n  .div-inner-2::before{\n    content: \"\";\n    width: 50px;\n    height: 50px;\n    position: absolute;\n    background-color: red;\n    left: 0;\n    bottom: -50px;\n    border-radius: 50%;\n  }\n<\/style><\/code><\/pre>\n\n\n\n
Draw an additional square at the corner that needs to be rounded using the ::after pseudo element<\/h2>\n\n\n
\n
\"Draw
Draw a square at the outer corner<\/figcaption><\/figure>\n<\/div>\n\n\n
<div class=\"div-outer\">\n  <div class=\"div-inner\">\n    <div class=\"div-inner-2\">\n      <!-- Contents -->\n    <\/div>\n  <\/div>\n<\/div>\n<style>\n  .div-outer{\n    width: 300px;\n    height: 300px;\n    background-color: #c3c3c3;\n  }\n  .div-inner{\n    width: 50%;\n    height: 50px;\n    background-color: gray;\n    position: relative;\n  }\n  .div-inner::before{\n    content: \"\";\n    width: 50px;\n    height: 50px;\n    position: absolute;\n    background-color: red;\n    right: -50px;\n    top: 0;\n    border-radius: 50%;\n  }\n  .div-inner::after{\n    content: \"\";\n    width: 25px;\n    height: 25px;\n    position: absolute;\n    background-color: blue;\n    right: -25px;\n    top: 0;\n  }\n  .div-inner-2::before{\n    content: \"\";\n    width: 50px;\n    height: 50px;\n    position: absolute;\n    background-color: red;\n    left: 0;\n    bottom: -50px;\n    border-radius: 50%;\n  }\n  .div-inner-2::after{\n    content: \"\";\n    width: 25px;\n    height: 25px;\n    position: absolute;\n    background-color: blue;\n    left: 0;\n    bottom: -25px;\n  }\n<\/style><\/code><\/pre>\n\n\n\n
Set z-index: 10 for the circle, then change the background-color accordingly and you will achieve the result.<\/h2>\n\n\n
\n
\"z-index
z-index for circle<\/figcaption><\/figure>\n<\/div>\n\n\n
<div class=\"div-outer\">\n  <div class=\"div-inner\">\n    <div class=\"div-inner-2\">\n      <!-- Contents -->\n    <\/div>\n  <\/div>\n<\/div>\n<style>\n  .div-outer{\n    width: 300px;\n    height: 300px;\n    background-color: #c3c3c3;\n  }\n  .div-inner{\n    width: 50%;\n    height: 50px;\n    background-color: gray;\n    position: relative;\n    border-radius: 0px 0px 25px 0px;\n  }\n  .div-inner::before{\n    content: \"\";\n    width: 50px;\n    height: 50px;\n    position: absolute;\n    background-color: #c3c3c3;\n    right: -50px;\n    top: 0;\n    border-radius: 50%;\n    z-index: 10;\n  }\n  .div-inner::after{\n    content: \"\";\n    width: 25px;\n    height: 25px;\n    position: absolute;\n    background-color: gray;\n    right: -25px;\n    top: 0;\n  }\n  .div-inner-2::before{\n    content: \"\";\n    width: 50px;\n    height: 50px;\n    position: absolute;\n    background-color: #c3c3c3;\n    left: 0;\n    bottom: -50px;\n    border-radius: 50%;\n    z-index: 10;\n  }\n  .div-inner-2::after{\n    content: \"\";\n    width: 25px;\n    height: 25px;\n    position: absolute;\n    background-color: gray;\n    left: 0;\n    bottom: -25px;\n  }\n<\/style><\/code><\/pre>\n\n\n
\n
\"Rounded
Rounded outer corners<\/figcaption><\/figure>\n<\/div>\n\n\n
Other examples<\/h2>\n\n\n\n
\n  See the Pen \n  Round Out Borders<\/a> by ARTRU (@artrublog<\/a>) on CodePen<\/a>.<\/span>\n<\/p>\n