How to add stroke or dashed border to a text using CSS or SCSS?-CodePudding

Am trying to figure out how can I add a dashed border to my header text, such that my result should be as shown in the image below.

Please see the code I tried (React JSX):

<Box>
    <p className="recentTitle"> Recent Transactions</p>
</Box>

CSS

.recentTitle {
    margin-left: 6% !important;
    margin-top: 7% !important;
    outline: 1px dashed white;
    width: fit-content !important;
    padding: 5px !important;
    border-radius: 2px !important;
}

The result I want to show or am trying to achieve.

Any help or suggestions are appreciated.

Thanks for taking the time to read and comment in advance.

CodePudding user response：

There are a little opportunities for customize border.

But you can use a trick with ::before and ::after for imitate border.

body {
background: #000;
}

.recentTitle {
  position: relative;
  display: inline-block; 
  padding: 20px;
  border-radius: 8px;
  color: white;
}

.recentTitle::before {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 50%;
  height: 75%;
  border-left: 1px solid #fff;
  border-top: 1px solid #fff;
  border-radius: 8px 0 0 0;
}

.recentTitle::after {
  position: absolute;
  bottom: 0;
  right: 0;
  content: '';
  width: 50%;
  height: 75%;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  border-radius: 0 0 8px 0;
}

<div > Recent Transactions</div>

Here is one more interesting example with useing pseudo classes:

(original source: https://codepen.io/shshaw/pen/MqMZGR?editors=0010)

@charset "UTF-8";
.gradient-box {
  display: flex;
  align-items: center;
  width: 90%;
  margin: auto;
  max-width: 22em;
  position: relative;
  padding: 30% 2em;
  box-sizing: border-box;
  color: #FFF;
  background: #000;
  background-clip: padding-box;
  /* !importanté */
  border: solid 5px transparent;
  /* !importanté */
  border-radius: 2em;
}
.gradient-box:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  margin: -5px;
  /* !importanté */
  border-radius: inherit;
  /* !importanté */
  background: linear-gradient(to right, red, orange);
}

html {
  height: 100%;
  background: #000;
  display: flex;
}

body {
  margin: auto;
}

<div >
  
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum, lorem vel tincidunt imperdiet, nibh elit laoreet felis, a bibendum nisl tortor non orci. Donec pretium fermentum felis, quis aliquet est rutrum ut. Integer quis massa ut lacus viverra pharetra in eu lacus. Aliquam tempus odio adipiscing diam pellentesque rhoncus. Curabitur a bibendum est. </p>

</div>

CodePudding user response：

You can draw the border on the p in the usual way and then use clip-path to cut out the bits you don't want.

In this snippet it's been assumed that the amount to you want to clip out is equivalent to the 5px padding, but of course you can have a more complex step sort of path if you want to clip more in the y direction.

body {
  background: black;
}

.recentTitle {
  margin-left: 6%;
  margin-top: 7%;
  width: fit-content;
  padding: 5px;
  border-radius: 2px;
  color: white;
  position: relative;
  border: solid white 1px;
  box-sizing: border-box;
  --c: 5px;
  clip-path: polygon(0% 0%, 50% 0%, 50% var(--c), 100% var(--c), 100% 100%, 100% 100%, 50% 100%, 50% calc(100% - var(--c)), 0% calc(100% - var(--c)));
}

<p > Recent Transactions</p>