CODEWITHSUNDEEP
htmlcsscss-shapes
Praveen M P
Praveen M P

Reputation: 11614

CSS border style inside

Boder

I want to create a border as shown in the image. I tried with all the styles inset, outset,ridge and groove but I was not able to get the expected result. Is there any way to bend border towards inside till middle and get back towards till top(hope you understand the problem).

If it's repeated question please add the solution link.

Thanks in advance.
I have tried this:

        div {  
              border-bottom: 1px ridge #B5B9BB;
              /*border-bottom: 1px inset #B5B9BB;
              border-bottom: 1px outset #B5B9BB;
              border-bottom: 1px groove #B5B9BB; */
            }

Upvotes: 1

Views: 1203

Answers (6)

JacobG182
JacobG182

Reputation: 329

You could always try a hr tag. You can then style it in CSS to your desired preference.

HTML

New apps 
<hr>

Upvotes: 1

Nima Parsi
Nima Parsi

Reputation: 2110

Whenever I am in your situation I use box-shadow:

body {
    background:#D1D6D9;
    font-family:verdana;
}
div {
    border-bottom: 1px solid #B5B9BB;
    box-shadow:0 1px 1px rgba(255,255,255,.7);
    padding-bottom:5px;
}
<div>Available Apps</div>

Upvotes: 1

grilly
grilly

Reputation: 450

It is probably best to use a wrapping element if possible; it is more flexible than outline (supports border-radius, box-shadows etc.)

For example:

<div class="headline-area">
    <h2>Available Apps</h2>
</div>

with the CSS:

.headline-area {
  background:#D4D9DC;
  padding:5px;
}  
.headline-area h2 {
  border-bottom:1px solid #B5B9BB;
}

Upvotes: 1

Kawinesh S K
Kawinesh S K

Reputation: 3220

Try this Also but you need an extra Div to do so.

HTML

<div class="outerDiv">
    COntent
    <div class="innerDiV">
    </div>
<div>

CSS

.outerDiv{
    background-color: grey;
  height: 32px;
  text-align: center;
  padding: 16px;
  font-weight: bolder;
  font-size: 25px;
}
.innerDiV{
   margin: 0 auto;
  border: 1px solid black;
  width: 98%;
  margin-top: 10px;
}

Demo

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 114991

Seems why not just use a border on the text?

div {
  background: lightgrey;
  padding: 0.5em;
}
p {
  border-bottom: 1px ridge #B5B9BB;
}
<div>
  <p>Available Apps</p>
</div>

Upvotes: 1

Maxim Zhukov
Maxim Zhukov

Reputation: 10140

You could use outline:

.bordered {
    border-bottom: 1px solid grey;
    background: aliceblue;
    outline: 5px solid aliceblue;
}
<div class="bordered">Available Apps</div>

Demo

Upvotes: 1

Related Questions