How to CSS style a radius border

Question

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

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;
}

You'll need sone gradient effects. That can be done visually in Adobe Fireworks and then you can copy the CSS proprieties and paste to your stylesheet. For me is the easiest way to achieve what you need. If you don't have access to Fireworks, you can google for CSS gradient generators, like this [here](http://www.colorzilla.com/gradient-editor/). — Virtua Creative, Dec 30 '15 at 14:13
Try the `border-image property` Maybe this helps http://stackoverflow.com/questions/2717127/css3-gradient-borders — Esteban Rincon, Dec 30 '15 at 14:15
@estebanrincon Yes, and there may be some useful reading here http://stackoverflow.com/questions/3906983/css-two-color-borders — redditor, Dec 30 '15 at 14:17
Just keep in mind that border-radius is not supported in IE8 and earlier web browsers. — QuestionMarks, Dec 30 '15 at 14:19

score 3 · Accepted Answer · answered Dec 30 '15 at 14:17

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>

score 0 · Answer 2 · answered Dec 30 '15 at 14:11

0

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;
}

answered Dec 30 '15 at 14:11

Majid Sadr

911
7
18

score 0 · Answer 3 · answered Dec 30 '15 at 14:17

0

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>

answered Dec 30 '15 at 14:17

DavidDomain

14,976
4
42
50

This is for an outer shadow. I think an inner shadow is needed in the question. – Majid Sadr Dec 30 '15 at 14:19
@MajidSadr - You are probably right. It is kind of hard to see on the cropped image. – DavidDomain Dec 30 '15 at 14:20
Thank you very much! it helped me a lot. – Shvalb Dec 30 '15 at 14:47

How to CSS style a radius border

3 Answers3