Recently I am creating a website. I want to make a transparent border around the main title CSS.

**Code:

h1
{
    background-color: rgb(66, 113, 214);
    color:#581845;
}```

Can Anyone help me?
Thank you

CodePudding user response：

If you want a transparent border you must change the background-clip property as, otherwise, the background color will show through.

Here I have added an outline so you can see the "gap" where the border is.

h1 {
  background-color: rgb(66, 113, 214);
  color: #581845;
  display: inline-block;
  margin: .5em 1em;
  border: 12px solid transparent;
  outline: 1px solid red;
}

.clip {
  background-clip: content-box;
}

body {
  background: lightblue;
}

<h1 class="clip">With Clipping</h1>

<h1>Without Clipping</h1>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Use rgba instead of rgb

{
    ...
    background-color: rgba(66, 113, 214, 0.5);
    color:#581845;
}

Last number is between 0 and 1 and it's the alpha or transparency

CodePudding user response：

h1 {
 border: 1px solid transparent;
}