Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. General Discussion
  3. Round Edges Images / Video

Round Edges Images / Video

Scheduled Pinned Locked Moved General Discussion
8 Posts 5 Posters 478 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • F Offline
    F Offline
    FloMo
    wrote on Nov 4, 2021, 11:29 AM last edited by
    #1

    Hello there,
    maybe a more or less simple question, I couldn't find an answer on so far: how can I set round edges for images and videos?

    Many thanks for your support.
    Cheers

    1 Reply Last reply
    0
    • R Offline
      R Offline
      Richard
      Global Moderator
      wrote on Nov 4, 2021, 7:35 PM last edited by
      #2

      Dear @FloMo

      This is not possible with standard options (unless the actual image and video files have round edges) but if you would like to use CSS to achieve this look into:

      Border Radius

      https://www.w3schools.com/cssref/css3_pr_border-radius.asp

      With Video, you will need to apply the Border radius to the video's container for example:

      https://codepen.io/hetgelaat/pen/dVjZWE

      https://stackoverflow.com/questions/6238451/rounded-corners-on-html5-video/24014427


      https://laytheme.com/documentation.html#custom-css-styling


      Best wishes @FloMo & have a great day 🏖
      Richard
      1 Reply Last reply
      0
      • D Offline
        D Offline
        dominikrobak
        wrote on Nov 17, 2023, 4:28 PM last edited by
        #3
        This post is deleted!
        1 Reply Last reply
        0
        • D Offline
          D Offline
          dominikrobak
          wrote on Nov 17, 2023, 9:23 PM last edited by
          #4

          Hi @FloMo and @Richard can you help me to round the corners in whole my website?
          For every image. It's possible with one code?
          Thanks a lot. Dominik

          1 Reply Last reply
          0
          • A Offline
            A Offline
            arminunruh
            Global Moderator
            wrote on Nov 19, 2023, 4:30 PM last edited by
            #5

            just apply this css to any css selectors:

            border-radius: 20px;
            overflow: hidden;

            like:

            .ph{
            border-radius: 20px;
            overflow: hidden;
            }
            
            1 Reply Last reply
            0
            • A Offline
              A Offline
              arminunruh
              Global Moderator
              wrote on Nov 19, 2023, 4:31 PM last edited by
              #6

              into lay options → custom css & html

              1 Reply Last reply
              0
              • M Offline
                M Offline
                MaxWinter
                wrote on Jan 26, 2024, 6:29 PM last edited by MaxWinter Jan 26, 2024, 1:32 PM
                #7

                Hello,

                this code was helping me a lot to give video sequences round edges on my whole website. Thanks for that!

                However, I now have problems with the rounded edges on photos. But only at the bottom as soon as I add a caption. See the screenshots.

                I am using this code for the videos:

                .ph{
                border-radius: 6px;
                overflow: hidden;
                }

                And this code for the images:

                .img{
                border-radius: 6px;
                overflow: hidden;
                }

                Does anyone have any idea how I could fix this?

                Everyone have a nice weekend!
                Bildschirmfoto 2024-01-26 um 19.21.09.png Bildschirmfoto 2024-01-26 um 19.24.42.png

                1 Reply Last reply
                0
                • A Offline
                  A Offline
                  arminunruh
                  Global Moderator
                  wrote on Jan 27, 2024, 12:51 PM last edited by
                  #8

                  try this

                  .type-img img{
                      border-radius: 10px;
                  }
                  .type-img .ph{
                      background-color: transparent!important;
                  }
                  
                  1 Reply Last reply
                  0
                  Reply
                  • Reply as topic
                  Log in to reply
                  • Oldest to Newest
                  • Newest to Oldest
                  • Most Votes


                  I also code custom websites or custom Lay features.
                  💿 Email me here: 💿
                  info@laytheme.com

                  Before you post:
                  1. When using a WordPress Cache plugin, disable it or clear your cache.
                  2. Update Lay Theme and all Lay Theme Addons
                  3. Disable all Plugins
                  4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

                  This often solves issues you might run into

                  When you post:
                  1. Post a link to where the problem is
                  2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
                  3. If the problem is difficult to explain, post screenshots / link to a video to explain it
                  Online Users
                  Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
                  laytheme.com
                  • Login

                  • Don't have an account? Register

                  • Login or register to search.
                  • First post
                    Last post
                  0
                  • Recent
                  • Tags
                  • Popular
                  • Users
                  • Search