working on it ...

Filters

Explore Public Snippets

Sort by

Found 65 snippets matching: border-radius

    public by lbottaro  4180  3  6  2

    Round corner div using CSS style

    This simple html example shows how to render a div with rounded corners.
    <!DOCTYPE html>
    <html>
    <HEAD>
    <title>HTML Example</title>
    <style type="text/css">
    .roundCss 
    {
    -moz-border-radius: 15px;
    border-radius: 15px;
    border:2px solid #a1a1a1;
    padding:10px 40px; 
    background:#FAFAFA;
    width:850px;
    }
    </style>
    </HEAD>
    
    <BODY>
    <h1>My rounded corner div</h1>
    <div class="roundCss">some text here...</div>
    </BODY>
    </html>

    external by tgardner851  22  0  1  0

    Radius and Rounded // The .radius and .round classes allow you to easily apply a border-radius to a UI-element. Adding the class to a button group will apply the border radius only to the outside corners. // From http://foundation.zurb.com/docs/utilit...

    Radius and Rounded // The .radius and .round classes allow you to easily apply a border-radius to a UI-element. Adding the class to a button group will apply the border radius only to the outside corners. // From http://foundation.zurb.com/docs/utility-classes.html: Radius_Rounded_Classes.html
    <div class="alert-box [radius round]" data-alert>Alert<a href="#" class="close">&times;</a></div>
    <div class="progress [radius round]">
      <span class="meter" style="width:70%;"></span>
    </div>
    <a href="#" class="button [radius round]">Button</a>
    <span class="label [radius round]">Label</span>
    <span data-tooltip class="[radius round]" title="Tooltip">Tooltip</span>
    
    

    external by Marc Hoover  22  0  1  0

    CSS box with border-radius and box shadow

    CSS box with border-radius and box shadow: gistfile1.txt
    .myClass {
    	font-size: 16px;
    	display: inline-block;
      background: #444;
      line-height: 20px;
      border: 1px solid #FFF;
      padding: 3px;
      border-radius: 3px;
      box-shadow: -3px 3px 3px #888;	
    }
    
    

    external by koudaiii  11  0  1  0

    CSS:CSS3で画像や要素を角丸にして表示する「border-radius」

    CSS:CSS3で画像や要素を角丸にして表示する「border-radius」: gistfile1.md
    CSS3の「border-radius」プロパティを使用すると画像や要素を角丸にして表示することができます。
    
    今までは要素などを角丸にしたい場合、角丸の画像を作成して表示するなどしていました。
    「border-radius」プロパティを使用すればCSSの記述だけでOKです。
    
    また、指定した箇所のみに角丸を適用することも可能です。
    
    下記にCSS3の「border-radius」プロパティを使用した時の方法をメモします。
    
    ■ 「border-radius」の使用方法
    
    【CSS】
    
    ```css
    .border_radius {
        border-radius: 20px;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
    }
    ```
    【HTML】
    
    要素に角丸を指定する場合
    
    ```html
    <div class="border_radius">
    表示する内容
    </div>
    ```
    
    画像に角丸を指定する場合
    
    ```html
    <img src="./test.jpg" class="border_radius">
    ```
    
    * http://raining.bear-life.com/css/css%E3%81%A7%E7%94%BB%E5%83%8F%E3%82%84%E8%A6%81%E7%B4%A0%E3%82%92%E8%A7%92%E4%B8%B8%E3%81%AB%E3%81%97%E3%81%A6%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B%E3%80%8Cborder-radius%E3%80%8D
    
    

    external by madebyelmcity  734  0  3  0

    Disable border-radius on iOS

    Disable border-radius on iOS: no-border-radius.css
    input, textarea { /* Disable border-radius in iOS */
        -webkit-appearance: none;
        border-radius: 0;
    }
    
    

    external by Leo  619  0  3  0

    Complete Sass mixin for Bootstrap 3 Projects > media queries, transitions, border-radius, box-shadow, rotate, scale, translate, skew, translate3d, opacity...

    Complete Sass mixin for Bootstrap 3 Projects media queries, transitions, border-radius, box-shadow, rotate, scale, translate, skew, translate3d, opacity...: _mixins.scss
    /******************
       Sass Processor */
    
    @mixin processor($function, $params) {
        -webkit-#{$function}: $params;
        -moz-#{$function}: $params;
        -ms-#{$function}: $params;
        -o-#{$function}: $params;
        #{$function}: $params;
    }
    
    @mixin transition($property: all, $duration: 0.3s, $timing: ease-in-out) {
        @include processor(transition, $property $duration $timing);
    } //@include transition(all 0.3s ease-in-out);
    
    //linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit;
    
    @mixin border-radius($params: 4px) {
        @include processor(border-radius, $params);
    } //@include border-radius(4px);
    
    @mixin box-shadow($top: 2px, $left: 2px, $blur: 3px, $color: #ccc) {
        @include processor(transition, $top $left $blur $color);
    } //@include box-shadow(2px, 2px, 3px, #ccc);
    
    @mixin rotate($method: rotate, $params: 15deg) {
        @include processor(transform, $method($params));
    } //@include rotate(15deg);
    
    @mixin scale($method: scale, $params: 2) {
        @include processor(transform, $method($params));
    } //@include scale(2);
    
    @mixin translate($method: translate, $x: 20px, $y: -20px) {
        @include processor(transform, $method($x, $y));
    } //@include translate(20px, 20px);
    
    @mixin skew($method: skew, $x: 15deg, $y: 15deg) {
        @include processor(transform, $method($x, $y));
    } //@include skew(15deg, 15deg);
    
    @mixin translate3d($method: translate3d, $x: 50px, $y: 50px, $z: 0px) {
        @include processor(transform, $method($x, $y, $z));
    } //@include translate3d(50px, 50px, 0px);
    
    
    
    /******************
       Specifics ******/
    
    @mixin opacity($params: 0.6) {
        -khtml-opacity: $params;
        -moz-opacity: $params;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$params * 100})";
        filter: alpha(opacity=$params * 100);
        opacity: $params;
    } //@include opacity(0.5);
    
    @mixin font-smoothing($value: on) {
       @if $value == on {
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
       }
       @else {
          -webkit-font-smoothing: subpixel-antialiased;
          -moz-osx-font-smoothing: auto;
       }
    } //@include font-smoothing(on);
    
    @mixin linear-gradient($from, $to) {
       background-color: $to; /* Fallback Color */
       background-image: -webkit-gradient(linear, left top, left bottom, from($from), to($to)); /* Saf4+, Chrome */
       background-image: -webkit-linear-gradient(top, $from, $to); /* Chrome 10+, Saf5.1+, iOS 5+ */
       background-image:    -moz-linear-gradient(top, $from, $to); /* FF3.6 */
       background-image:     -ms-linear-gradient(top, $from, $to); /* IE10 */
       background-image:      -o-linear-gradient(top, $from, $to); /* Opera 11.10+ */
       background-image:         linear-gradient(top, $from, $to);
       filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#{$from}', EndColorStr='#{$to}');
    } //@include linear-gradient(#ccc, #555);
    
    @mixin background-cover($url) {
       background-image: url($url);
       background-size: cover;
       background-position: center center;
       background-repeat: no-repeat;
       /*@include media-max-767 {
          background-image: url('#{$path}#{$bg-url}');
          background-position: top center;
       }*/
    } //@include background-cover(img/background.jpg);
    
    @mixin flex-align($align) {
       display: -webkit-flex;
       display: -ms-flexbox;
       display: flex;
       &, [class*="col-"] {
          -ms-flex-align: $align;
          -webkit-align-items: $align;
          -webkit-box-align: $align;
          align-items: $align;
       }
       @include media-max-767 {
          display: block !important;
       }
    } //@include flex-align(center);
    
    
    
    /******************
       Media Queries **/
    
    $screen-xxs:  480px;
    $screen-sm:   768px;
    $screen-md:   992px;
    $screen-lg:  1200px;
    
    /********** Extra small devices */
    @mixin media-max-479 {
        @media (max-width: ($screen-xxs - 1)) {
            @content;
        }
    }
    @mixin media-min-480 {
        @media (min-width: $screen-xxs) {
            @content;
        }
    }
    
    /********** Small devices */
    @mixin media-max-767 {
        @media (max-width: ($screen-sm - 1)) {
            @content;
        }
    }
    @mixin media-min-768 {
        @media (min-width: $screen-sm) {
            @content;
        }
    }
    
    /********** Medium devices */
    @mixin media-max-991 {
        @media (max-width: ($screen-md - 1)) {
            @content;
        }
    }
    @mixin media-min-992 {
        @media (min-width: $screen-md) {
            @content;
        }
    }
    
    /********** Large devices */
    @mixin media-max-1199 {
        @media (max-width: ($screen-lg - 1)) {
            @content;
        }
    }
    @mixin media-min-1200 {
        @media (min-width: $screen-lg) {
            @content;
        }
    }
    
    
    
    

    external by WebPlatformDocs  550  0  4  0

    border-radius examples

    border-radius examples: dabblet.css dabblet.html dabblet.js settings.json
    /**
     * border-radius examples
     */
    
    div {
      font-size: 0.8em;
      background-color: red;
      background-image: linear-gradient(#ff0000,#a60000);
      width: 200px;
      height: 200px;
      float: left;
      margin: 10px;
    }
    
    code {
      position: relative;
      top: 20px;
      left: 10px
    }
    
    .one {
       border-radius: 1em;
    }
    
    .two {
       border-radius: 20px 1em 1vw / 0.5em 3em;
    }
    
    .three {
       border-radius: 50%;
    }
    
    .four {
       border-radius: 100% 150%;
    }
    
    <div class='one'><code>border-radius: 1em;</code></div>
    <div class='two'><code>border-radius: 20px 1em 1vw /<br> 0.5em 3em;</code></div>
    <div class='three'><code>border-radius: 50%;</code></div>
    <div class='four'><code>border-radius: 100% 150%;</code></div>
    
    // alert('Hello world!');
    
    {"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}
    
    

    external by jason-hoppedupdesigns  369  0  3  0

    Border-radius Mixin

    Border-radius Mixin: sass-border-radius.scss
    @mixin border-radius($radius) {
      -webkit-border-radius: $radius;
      -moz-border-radius: $radius;
      -ms-border-radius: $radius;
      border-radius: $radius;
    }
    
    // Usage
    .box { 
      @include border-radius(10px); 
    }
    
    

    external by Nico Nagel  323  0  3  0

    css reset for html SELECT : style select input - no border-radius but with the icon

    css reset for html SELECT : style select input - no border-radius but with the icon: select-reset.css
    select {
        -webkit-appearance: none;
        -moz-appearance: none;
        background-position: right 50%;
        background-repeat: no-repeat;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);
        padding-right: 1.5em
    }
    
    

    external by MatthewKosloski  310  0  3  0

    A SCSS border-radius Mixin

    A SCSS border-radius Mixin: border-radius.scss
    //---------------------------
    //
    // Border radius mixin
    // ===================
    //
    // Extends the border-radius property to all browsers.
    // If no radius is given, it will default to 4px.
    // 
    // Usage:
    // @include border-radius("top left", 5px);
    // @include border-radius("top right", 5px);
    // @include border-radius("bottom left", 5px);
    // @include border-radius("bottom right", 5px);
    // @include border-radius("all", 5px);
    //
    //---------------------------
    @mixin border-radius($side: null, $radius: 4px) {
      $t: "top"; 
      $l: "left"; 
      $b: "bottom"; 
      $r: "right"; 
      $tb: str-index($side, $t); 
      $lr: str-index($side, $l);
      @if ($side == "top left" or $side == "top right" or $side == "bottom left" or $side == "bottom right") {
        -webkit-border-#{if($tb, $t, $b)}-#{if($lr, $l, $r)}-radius: $radius;
        -moz-border-radius-#{if($tb, $t, $b)}#{if($lr, $l, $r)}: $radius;
        border-#{if($tb, $t, $b)}-#{if($lr, $l, $r)}-radius: $radius;
      } @else {
        -webkit-border-radius: $radius;
        -moz-border-radius: $radius;
        -ms-border-radius: $radius;
        border-radius: $radius;
      }
    }
    
    
    
    • Public Snippets
    • Channels Snippets