CODEWITHSUNDEEP
htmlcss
Shvalb
Shvalb

Reputation: 1933

How to CSS style a radius border

I'm looking to style the border like in the example picture attached.

enter image description here

I would like it to have a black frame, and a white effect like in the picture.

so far I have this:

div {
   border: 1px solid black;
   border-radius: 10px;
}

Upvotes: 2

Views: 144

Answers (3)

DavidDomain
DavidDomain

Reputation: 15303

Using border-radius and box-shadow should work.

Here is an example.

body {
  background-color: #111;
}

div {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  box-shadow: 0 -2px 2px rgba(255, 255, 255, 0.6);
  background-color: #444;
  min-height: 50px;
}
<div></div>

Upvotes: 0

gearsdigital
gearsdigital

Reputation: 14225

Straight copied from a project I'm working on. Just change the colors your way. Needs only a little effort ;)

    .btn-primary {
      box-shadow: inset 0 1px 0 0 #54a3f7;
      background: linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);
      border-radius: 3px;
      border: 1px solid #124d77;
      display: inline-block;
      cursor: pointer;
      color: #ffffff;
      padding: 6px 24px;
      text-decoration: none;
      text-shadow: 0 1px 0 #154682;
    }

    .btn-primary:hover {
      background: linear-gradient(to bottom, #0061a7 5%, #007dc1 100%);
    }

    .btn-primary:active {
      position: relative;
      top: 1px;
    }
<a class="btn-primary">Button galore</a>

Upvotes: 3

Majid Sadr
Majid Sadr

Reputation: 1081

I think it can be done using this CSS code:

div {
    -moz-box-shadow:    inset 0 0 2px #fff;
    -webkit-box-shadow: inset 0 0 2px #fff;
    box-shadow:         inset 0 0 2px #fff;
    border: 1px solid black;
    border-radius: 10px;
}

Upvotes: 0

Related Questions